添加功能＆＃34; enableresize＆＃34;在画布上

Question

我是javascript的新手，我需要一些帮助！ 所以我使用了这个源代码：link

该演示非常完美。但是我需要为用户提供一个选项。也就是说，用户在上传图像时能够在画布中调整大小并旋转它，而不是仅仅在画布中移动它。 （所以当我将图像上传到画布时，它应该看起来像this，但只能旋转和调整大小，我不需要过滤器）

谢谢！

Answer 1

使用范围控件从用户获取缩放系数：

<input id=myslider type=range min=25 max=400 value=100>

使用context.scale响应滑块中的更改以调整图片大小：

$myslider.on('input change',function(){
    var scale=parseInt($(this).val())/100;
    ctx.clearRect(0,0,cw,ch);
    ctx.scale(scale,scale);
    ctx.drawImage(img,0,0);
    ctx.setTransform(1,0,0,1,0,0);
});

示例代码和演示：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;


$myslider=$('#myslider');
$myslider.attr({min:25,max:400}).val(100);
$myslider.on('input change',function(){
  var scale=parseInt($(this).val())/100;
  ctx.clearRect(0,0,cw,ch);
  ctx.scale(scale,scale);
  ctx.drawImage(img,0,0);
  ctx.setTransform(1,0,0,1,0,0);
});

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/ball1.png";
function start(){
  ctx.drawImage(img,0,0);
}

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Resize:&nbsp<input id=myslider type=range><br>
<canvas id="canvas" width=300 height=300></canvas>