HTML5 Canvas drawImage问题
维奈
我正在使用cropper.js库从图像获取裁剪坐标，然后创建画布以下载裁剪后的图像。
我的固定裁切尺寸最大为200x200像素
问题在于，裁剪后的图像不能完全拉伸到其应画布的200 px宽度。见下图
检查这个小提琴（感谢@entio作为小提琴）
下面是代码
<body>
<img src="Desert.jpg" id="image" style="float:left;"/>
<canvas id="myCanvas" style="height:200px; width:200px; position:absolute; right:50px; top:20px; border:1px dotted black;"></canvas>
<div>
<label><em>y</em>coordinate</label>
<input type="text" name="y" id="y-1" class="form-control" value="0" />
<label><em>x</em> coordinate</label>
<input type="text" name="x" id="x-1" class="form-control" value="0" />
<label>Selected <em>width</em></label>
<input type="text" name="width" id="width-1" class="form-control" value="0" />
<label>Selected <em>height</em></label>
<input type="text" name="width" id="height-1" class="form-control" value="0" />
</div>
</body>
<script type="text/javascript">
document.getElementById('image').onload = function() {
new Cropper(image, {
// options
max_width: 200,
max_height: 200,
update: function(coordinates) {
console.log(coordinates);
console.log(image);
for (var i in coordinates) {
document.getElementById(i + '-1').value = coordinates[i];
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.drawImage(image, coordinates['x'],coordinates['y'], coordinates['width'],coordinates['height'], 0, 0, 200, 200);
}
});
}
</script>
有什么帮助吗？
米格尔
画布使用宽度和高度属性。
<canvas id="myCanvas" width="200" height="200" style="height:200px; width:200px; posit...
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
“ width属性默认为300，height属性默认为150。” 因此，除非您指定是否，否则它没有您想要的大小。
内容： http : //jsfiddle.net/RgGJh/2/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
HTML5 canvas drawImage（）函数
- 2
Canvas HTML5的问题无法平局
- 3
Canvas html5的问题无法平局
- 4
HTML5 Canvas游戏，多层问题
- 5
HTML5 Canvas 中的 drawImage() 无法按预期工作
- 6
canvas drawImage循环问题
- 7
canvas drawImage和范围问题
- 8
更改HTML5 canvas中的字体的问题
- 9
iOS HTML5 Canvas在draw / clearRect上的问题
- 10
多个html5 canvas元素：性能问题？
- 11
如何解决HTML5 canvas globalAlpha问题？
- 12
更改html5 canvas中的字体的问题
- 13
iOS HTML5 Canvas在draw / clearRect上的问题
- 14
HTML5 canvas drawImage图片大小不正确
- 15
具有视频源的HTML5 Canvas drawImage在Android上不起作用
- 16
防止RAP中drawImage的HTML5 canvas标签的磁盘缓存
- 17
使用 drawImage 函数未显示 HTML5 Canvas（多个图像）的图像
- 18
调用 canvas.drawImage() 时的性能问题
- 19
HTML5 canvas javascript
- 20
HTML5 canvas javascript
- 21
来自视频的HTML5 Canvas drawImage在第一次绘制时未显示
- 22
HTML5视频在Android Chrome上陷入canvas2D问题
- 23
HTML 5-使用<img>元素和Canvas drawImage
- 24
使用drawImage（）在Canvas上绘制多个图像的问题
- 25
HTML 5 canvas globalCompositeOperation（eraser）问题
- 26
HTML5 Canvas文字交集
- 27
如何清除canvas html5？
- 28
HTML5 Canvas游戏渲染图
- 29
从html5 <canvas>创建视频流
我来说两句