Question

我正在尝试在画布中绘制一个很大的图像的一部分，所有内容在桌面上均能正常工作，但在移动设备上，图像要么模糊要么裁剪不正确。

代码非常简单：

var c = document.getElementById("c");
var ctx = c.getContext("2d");
var img = document.getElementById("image");
ctx.drawImage(img, 0, 0, 400, 400, 0, 0, 400, 400);

并且html是：

<img id="image" src="https://c402277.ssl.cf1.rackcdn.com/photos/13338/images/hero_full/17_259_Earth_Hour_Social_Web_1600x600_v2.jpeg?1490108175" style="display:none">
<canvas id="c" width="400" height="400"></canvas>

如果我使用上面html中的图像，则一切正常，在所有浏览器中都能正常工作；如果我使用较大的图像，例如this，则台式机和移动设备之间的结果不一致

这是两个小提琴：

常规图片：https://jsfiddle.net/al3x88/as2nxwtk/7/
大图：https://jsfiddle.net/al3x88/as2nxwtk/9/

这是大屏幕快照的两个屏幕截图，分别是台式机（左）和移动设备（右）

Answer 1

您好，您可以使用以下公式来管理具有高分辨率的图像。

var c = document.getElementById("c");
var ctx = c.getContext("2d");
var img = document.getElementById("image");

var widthPer = 400; // Desire width to draw in pixel as per original image size.
var heightPer = 400; // Desire height to draw in pixel as per original image size.


var drawImgWidth = (img.width/img.naturalWidth)*widthPer;  // calculated width in pixel.
var drawImgHeight = (img.height/img.naturalHeight)*heightPer; // calculated height in pixel.


if(img.width != img.naturalWidth) {
     ctx.drawImage(img, 0, 0, drawImgWidth, drawImgHeight, 0, 0, 400, 400);
}
else {
     ctx.drawImage(img, 0, 0, widthPer, heightPer, 0, 0, 400, 400);
}

跨浏览器在画布上绘制巨大图像的一部分

1 个答案: