js canvas 图片resize 旋转90度示例

	    function resize(img, canvas) {
                var oriW = img.width;
                var oriH = img.height;
                console.log("photo size: " + oriW + "," + oriH);
                if (oriW < canvas.width) {
                    return { w: oriW, h: oriH };
                } else {
                    var ratio = oriW / canvas.width;
                    return {w:canvas.width,h:oriH / ratio}
                    //  ctx.scale(scaleX, scaleY);
                }
            }


function rotate90_sample(){
var can = document.getElementById('canvas');
        var ctx = can.getContext('2d');
        var img = new Image();
        img.onload = function(){
            can.width = img.width;
            can.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
        }
        img.src = 'https://investmentscamsgtaneujinpartners.files.wordpress.com/2017/01/ej-ic.jpg';
        can.onclick = function() {
            ctx.translate(img.width-1, img.height-1);
            ctx.rotate(Math.PI);
            ctx.drawImage(img, 0, 0, img.width, img.height);
        };
		
		var flag = 1;
		document.getElementById("btn").onclick = function(){
		if(flag == 1){
			ctx.translate(img.width,0);
			flag = 2;
		}
		else {
			ctx.translate(img.height,0);
			flag=1;
		}
		    
            ctx.rotate(Math.PI /2 );
            ctx.drawImage(img, 0, 0, img.width, img.height);
		}
}

你可能感兴趣的:(Javascript)