Html2Canvas比例问题

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);

但它总是给我与图像值相同的图像，并且最终图像没有任何改善。

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

提前致谢

Answer 1

这只是不能...如果你使用位图图像乘法大小不会更好，但更低。您最多可以创建假像素作为原始像素的副本。对于具有图像的真实比例（没有质量损失），你必须使用标量图像这样的SVG，它不会在CANVAS中使用位图图像但在DOM中作为常规元素。

显然你可以使用context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);的选项参数，其中宽度和高度将是最终的宽度和高度（以像素为单位）（因此，没有更高质量的图像只是更大的尺寸和更低的质量，因为像素与从原始尺寸克隆的假像素相乘）。

我希望我的问题很好。

编辑：注意要在画布上绘制你要创建一个图像对象，如new Image（'imagename.png'）;至少但你可以添加alt属性和其他东西，如id等。更多示例源W3schools.org canvas.drawImage（...）