我已经实现了拖放图像,现在的问题是当我将画布数据转换为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/
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)给出一个空哈希。 我在后端的控制器代码