标签: todataurl

我想在浏览器中调整上传图像的大小。我使用 canvas 将上传的图像绘制到画布上，然后调整其大小，并使用 toDataURL 方法的结果。

简化的代码（没有上传部分）看起来像这样：

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d', { alpha: false} );
// img src contains data url of uploaded image
ctx.drawImage(img, 0, 0, imgWidth, imgHeight); 
var dataUrl = canvas.toDataURL('image/png');

问题是 dataUrl 包含 alpha 通道，尽管创建上下文时 alpha 设置为 false。

是否可以在没有 alpha 通道的情况下获取数据 url？

如果没有，我考虑使用 Javascript 图像库之一，但大多数都依赖于画布。

另外，我可以使用画布中的数据对图像进行编码，但我不想这样做:)

给定 JavaScript 中的画布，保存到后端服务器的正常工作流程如下：

1. 创建画布元素
2. 绘制/修改画布
3. 调用canvas.toDataURL()
4. 将画布的 Base64 表示形式上传到后端服务器（基本 Ajax）。

由于对 toDataURL() 的调用可能非常慢，我想知道是否可以直接将图像字节上传到后端服务器，而不是使用 toDataURL() 的 base64 方式。

有任何想法吗？

我试图使用javascript将图形从SVG(通过d3.js获得)导出到JPG图像.

事实是最终图像没有正确显示图像,但它绘制了一个黑色区域,包围图形的线条.这是他们的两张照片.在页面的顶部表示SVG,而描绘最终的JPG图像.

我写的代码如下:

    root_node = d3.select("svg")
      .attr("version", 1.1)
      .attr("xmlns", "http://www.w3.org/2000/svg")
      .node();

    s_xml = (new XMLSerializer).serializeToString(root_node);

    var imgsrc = 'data:image/svg+xml,'+ s_xml;
    var img = '<img src="'+imgsrc+'">';

    var canvas = document.createElement("canvas");

    canvas.width = 1600;
    canvas.height = 600;

    context = canvas.getContext("2d");

    var image = new Image;
    image.src = imgsrc;
    image.onload = function() {
        context.drawImage(image, 0, 0);
        context.fillStyle = 'white';
        context.globalCompositeOperation = "destination-over";
        context.fillRect(0, 0, canvas.width, canvas.height);

        var canvasdata = canvas.toDataURL("image/jpeg");
        var jpgimg = '<img src="'+canvasdata+'">';
        d3.select("body").append("svgdataurl").html(jpgimg);

    });

谁知道颜色转换错误的原因？提前致谢!

我有一个Three.js场景,我在其中设置了渲染器的preserveDrawingBuffer:true因为我想使用renderer.toDataURL拍摄画布上的内容的快照,我也使用renderer.autoClear = false因为我使用的是2个场景每个一个摄像头(当然一个渲染器).

问题在于,当我使用orbitControls移动相机时,对象不会像它们应该的那样动画,它们之前的状态保留在画布上,并且由于preserveDrawingBuffer:true设置,它们正在创建一个丑陋的绘画(它们不会被删除).

如何同时拥有2个场景/摄像机和轨道控制的快照功能,我该怎么办？

谢谢.