我已经实现了拖放图像，现在问题是当我将画布数据转换为 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('');
});
然后它发送数据如下：
< image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/gif;base64,..." x="-100" y="-100" style="stroke: rgb(240,240,240); stroke-width: 0;stroke-dasharray: none;stroke-linecap: butt;stroke-linejoin: miter;stroke-miterlimit: 10; fill: rgb(0,0,0) ; 填充不透明度: 0; 填充规则: 非零; 不透明度: 1;" width="200" height="200">
这里 ... 包含 base64 数据。
如果图像是使用 Drag n Drop 上传的，那么我使用以下方法：
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();
它发送的数据如下：
< image id="verified_image" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://localhost/lynkus/uploads/userprofile/verified_image.png" x=" -256" y="-256" style="stroke: none;stroke-width: 0;stroke-dasharray: none;stroke-linecap: butt;stroke-linejoin: miter;stroke-miterlimit: 10; fill: rgb( 0,0,0)；填充规则：非零；不透明度：1；" 宽度="512" 高度="512">
所以两种类型的图像上传都可以正常工作，但问题是我正在尝试使用上面的 svg 生成 png 文件。所以系统能够为第一个选项创建 png，但不能为第二个选项创建 png，因为它有一个 URL。
那么有没有办法在拖放选项中将数据作为 base 64 而不是图像 url 发送？
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;
}
您需要创建一个图像对象并使用 canvas 元素的 toDataURL 将其转换为 base64 数据。然后用于fabric.Image.fromURL将该图像数据添加到织物画布。这是更新的小提琴。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句