转换后的图像应该有一些小的url而不是BaseCode

现在我将图像上传到canvas上，在上传图像后，canvas由toDataURl转换为图像。 如果我通过toDataURL将canvas转换为图像，那么我将获得基本代码（基本代码将很大）。 我想要一些小url而不是BaseCode。

var canvas = new fabric.Canvas('canvas'); document.getElementById('file').addEventListener("change", function (e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function (f) { var data = f.target.result; var img = document.createElement('img'); img.src = data; img.onload = function () { if (img.width < 300 || img.height < 300) { alert("upload image should be greater"); canvas.getActiveObject().remove(); } }; fabric.Image.fromURL(data, function (img) { var oImg = img.set({left: 50, top: 100,width:100, height:100, angle: 00}).scale(0.9); canvas.add(oImg).renderAll(); var a = canvas.setActiveObject(oImg); var dataURL = canvas.toDataURL({format: 'png', quality: 0.8}); console.log("aaaaaaaaaaa" + dataURL); // console.log("Canvas Image " + dataURL); // document.getElementById('txt').href = dataURL; }); }; reader.readAsDataURL(file); }); document.querySelector('#txt').onclick = function (e) { e.preventDefault(); canvas.deactivateAll().renderAll(); document.querySelector('#preview').src = canvas.toDataURL(); var b= canvas.toDataURL(); console.log(b); } 

 canvas{ border: 1px solid black; } 

    Click Me!! 
  

JSFiddle： https ：//jsfiddle.net/varunPes/8gt6d7op/23/

Answer 1

魔鬼在细节中 – 你问的任何地方甚至建议你想把图像发送到某个地方 – 下面的代码仅限于客户端 – 你只能在客户端上使用短格式url，并且如评论中所述，仅用于会话（重新启动浏览器，url无用），或者直到revokeObjectURL

你可以 – 如果浏览器支持它，使用Blob，它的URL很短

 // converts a dataURI to a Blob function dataUriToBlob(dataURI) { var byteString = atob(dataURI.split(',')[1]); var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; var arrayBuffer = new ArrayBuffer(byteString.length); var _ia = new Uint8Array(arrayBuffer); for (var i = 0; i < byteString.length; i++) { _ia[i] = byteString.charCodeAt(i); } var dataView = new DataView(arrayBuffer); var blob = new Blob([dataView], { type: mimeString }); return blob; } // cross browser cruft var get_URL = function () { return window.URL || window.webkitURL || window; }; // ... your code, which eventually does this var b = canvas.toDataURL(); // get an URL from the Blob var blob = dataUriToBlob(b); var url = get_URL().createObjectURL(blob); console.log(url); // // ... when finished with the object URL URL.revokeObjectURL(url); 

Answer 2

如果要避免发送dataURL，可以使用此函数将其转换为DataForm：

 function dataURItoBlob(dataURI) { // convert base64/URLEncoded data component to raw binary data held in a string var byteString; if (dataURI.split(',')[0].indexOf('base64') >= 0) byteString = atob(dataURI.split(',')[1]); else byteString = unescape(dataURI.split(',')[1]); // separate out the mime component var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // write the bytes of the string to a typed array var ia = new Uint8Array(byteString.length); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ia], {type:mimeString}); } 

然后，称之为：

 var dataURL = canvas.toDataURL('image/jpeg', 0.5); var blob = dataURItoBlob(dataURL); var fd = new FormData(document.forms[0]); fd.append("canvasImage", blob); 

最后，发送此表单（常规或ajax）。

来源回答