Javascript - 设置context2d图像作为画布的背景

时间:2017-12-16 11:11:31

标签: javascript jquery html canvas fabricjs

我正在使用以下代码将优质图像设置为画布的背景。如果我将图像直接设置为背景,它就可以了。但图像质量不好。所以我使用另一个画布来获得高质量的图像然后我需要设置为背景。我正在使用$zipAdress="/var/www/cakephp/plugins/backup/EstelamBasic.zip"; $plugin_address="/var/www/cakephp/plugins/EstelamBasic/"; $zip = new ZipArchive; $res = $zip->open($zipAdress); if ($res === TRUE) { $zip->extractTo($plugin_address); $zip->close(); }

fabricjs

错误是

  

CanvasRenderingContext2D.drawImage的参数1无法转换为以下任意内容:HTMLImageElement,SVGImageElement,HTMLCanvasElement,HTMLVideoElement,ImageBitmap

我实际上在使用base64。但对于小提琴,我正在使用直接路径

以下是Fiddle

编辑:我在本地看到了图像渲染,但我需要将其设置为背景。

1 个答案:

答案 0 :(得分:0)

图像质量可能不佳的唯一原因是因为存在较高的缩减/升级因素。

对图像和css元素进行降尺度效果很好,而在画布上对drawImage进行缩小则很糟糕,因为画布使用最近邻居调整大小。

除此之外,还保留了图像的质量。

Fabricjs尝试帮助这个产品调整大小过滤器。

您可以在加载图像时对图像应用调整大小滤镜,然后使用所需尺寸的图像并匹配画布像素的1:1。 请注意,如果以更高的分辨率导出,则无法恢复图像的原始质量。