Question

我正在尝试使用 Html2Canvas库将HTML代码转换为图像。为了在结果中获得高质量的图像，我使用具有值2 的 scale 属性。

html2canvas(element, {
            scale: 2
        }).then(function(canvas) {
            getCanvas = canvas;
            var imageData = getCanvas.toDataURL("image/png", 1);
            var newData = imageData.replace(/^data:image\/png/, "data:application/octet-stream");
        });

现在，此 newData 使用AJAX发送到php，并且为了保存，我使用以下代码-

    define('UPLOAD_DIR', 'assets/output_images/');
    $image_parts = explode(";base64,", $_POST['ImageUri']);
    $image_type_aux = explode("image/", $image_parts[0]);
    $image_base64 = base64_decode($image_parts[1]);
    $file_name = uniqid().'.png';
    $file = UPLOAD_DIR . $file_name;
    $success =file_put_contents($file, $image_base64);

但是，它始终为我提供与值为1 的比例相同的图像，并且最终图像没有任何改善。

注意：我的div尺寸为369 * 520，生成的图像尺寸始终为369 * 520，比例值为1或2或3等。

预先感谢

Answer 1

这不可能……如果您使用位图图像，则乘以大小不会得到更好的质量，但是会更低。您最多将创建伪像素作为原始像素的副本。对于具有图像的真实比例（无质量损失），您必须使用标量图像，例如SVG，它将不在使用位图图像的CANVAS中，而是在DOM中作为常规Elements。

很明显，您可以将可选参数与 context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 其中width和height是最终的宽度和高度（以像素为单位）（因此，高质量的图像不会只是较大的尺寸，而质量会较低，因为像素会与从原始尺寸克隆的伪像素相乘）。

希望我能解决你的问题。

edit：请注意，要在画布上绘制，必须创建一个图像对象，例如new Image（'imagename.png'）;。至少，但是您可以添加alt属性和其他内容，例如id等。有关更多示例，请参见W3schools.org canvas.drawImage（...）

Html2Canvas缩放问题

1 个答案: