当前位置: 首页 > 知识库问答 >
问题:

在fabric js中发布图像数据而不是图像url

洪祺
2023-03-14

我已经实现了拖放图像,现在的问题是当我将画布数据转换为toSVG并将其发送到服务器时,它包括图像URL而不是图像数据。

当用户上传文件时,我使用以下方法:

     //Add photo in canvas
    document.getElementById('add_image').addEventListener('change', function (e) {
        var file = e.target.files[0];
        var reader = new FileReader();
        reader.onload = function (f) {
            var data = f.target.result;
            fabric.Image.fromURL(data, function (img) {
                var oImg = img.set({
                    left: 0,
                    top: 0,
                    angle: 0,
                    border: '#000',
                    stroke: '#F0F0F0', //<-- set this
                    strokeWidth: 0, //<-- set this
                    fill: 'rgba(0,0,0,0)'
                }).scale(0.2);
                canvas.add(oImg).renderAll();
                canvas.moveTo(oImg, z_index);
                z_index = z_index + 1;
                //var a = canvas.setActiveObject(oImg);
                var dataURL = canvas.toDataURL({
                    format: 'png',
                    quality: 1
                });
            });
        };
        reader.readAsDataURL(file);
        $(this).val('');
    });

然后按以下方式发送数据:

这里...包含base64数据。

如果图像是通过拖放方式上传的,那么我将使用以下方法:

var new_image = new fabric.Image(obj, {
    width: obj.naturalWidth,
    height: obj.naturalHeight,
    scaleX: setImageWidth/obj.naturalWidth,        
    scaleY: setImageHeight/obj.naturalHeight,
    // Set the center of the new object based on the event coordinates relative
    // to the canvas container.
    left: e.layerX,
    top: e.layerY,
    id: 'verified_image'
});
canvas.add(new_image);
canvas.renderAll();

它按以下方式发送数据:

所以这两种类型的图像上传都可以正常工作,但问题是我正在尝试使用上面的SVG生成png文件。所以系统可以为第一个选项创建png,但不能为第二个选项创建png,因为它有一个url。
那么有没有一种方法可以在拖放选项中作为基本64而不是图像url发送数据?

http://jsfiddle.net/durga598/w8kkc/414/

共有1个答案

宁良平
2023-03-14
function handleDrop(e) {
  // this / e.target is current target element.
  e.preventDefault();
  if (e.stopPropagation) {
    e.stopPropagation(); // stops the browser from redirecting.
  }

  var img = document.querySelector('#images img.img_dragging');

  var setImageWidth = 100,
    setImageHeight = 100;
  var imgObj = new Image();
  imgObj.crossOrigin = 'Anonymous';
  imgObj.onload = function(oImg) {
    var tempCanvas = document.createElement('CANVAS');
    var tempCtx = tempCanvas.getContext('2d');
    var height = tempCanvas.height = this.naturalHeight;
    var width = tempCanvas.width = this.naturalWidth;
    tempCtx.drawImage(this, 0, 0);
    var dataURL = tempCanvas.toDataURL();
    fabric.Image.fromURL(dataURL, function(img) {
      img.set({
        width: width,
        height: height,
        scaleX: setImageWidth / width,
        scaleY: setImageHeight / height,
        left: e.layerX,
        top: e.layerY,
      })
      canvas.add(img);
    })
  }
  imgObj.src = img.src;
  return false;
}

您需要创建一个image对象,并使用canvas元素的toDataURL将其转换为base64数据。然后使用fabric.image.fromurl将该图像数据添加到fabric画布中。这里是更新的小提琴。

 类似资料:
  • 我正在尝试将画布作为图像发送到我的服务器,并希望以base64发送。Fabricjs提供了使用或将画布转换为图像,但我的日志上的输出似乎是一个Klass对象(第一次看到),将该对象发送到服务器并记录服务器上接收到的内容后,我会得到一个空对象或路径,即: Klass对象控制台图像: 我的代码: 我尝试了这个,仍然是同一个klass对象,需要将画布转换为base64图像(首选png),然后发送到服务器

  • 使用下面的代码,我可以在加载到画布中的图像上绘制一个区域,并用一些颜色填充绘制的区域。 现在,我需要用图像而不是颜色填充绘制区域。比如: 帆布fillStyle='url(myimage.jpg)'; 而不是 帆布fillStyle='#123456'//填充颜色示例 HTML: jquery。拉票。min.js

  • 我想从ImageData对象(即宽度、高度、数据)创建一个dataURL。我意识到canvas有这个功能,但我想避免canvas使用时出现的扭曲(主要是alpha预乘)。。i、 我想避开明显的画布。putImageData步骤。 从这篇文章中,我可以将任何arraybuffer/typedarray/dataview转换成base64。我不知道的是canvas dataurl如何将宽度/高度添加到

  • 在我们的应用程序中,用户多年来一直在使用以下代码上传数百万张图像: 最近,我们看到需要保存上传图像的数据。问题在于,压缩位图时图像Exif数据丢失。我考虑使用从原始文件中提取此数据: ..然后将其添加到InputStream 中,然后继续上传文件。问题是< code>ExifInterface无法将Exif数据保存到InputStream。 当Exif数据上传到服务器时,如何将它们保留在图像中?

  • 到目前为止,我一直在使用 以旋转 OMR 应用程序的图像。结果是一个旋转但模糊的图像。我也怀疑这会围绕其中心旋转图像。如何将特定的像素位置指定为旋转中心?

  • 我在后端使用Rails API,在前端使用ReactJS。我也使用载波在后端处理我的图像。我试图上传我的图像并将其发送到后端。使用简单的超文本标记语言上传器在前端捕获图像文件。 这是我的uploader.jsx 以上代码是此解决方案的精确副本。我使用formData和axios将数据推送到后端。但数据在数据库中存储为“nil”值。安慰log(formData)给出一个空哈希。 我在后端的控制器代码