[英]Convert canvas into image with fix size in HTML5
我正在使用HTML5。 现在,我通过toDataURL
将画布转换为图像。 但我想将此画布转换为不同的大小。 例如,我的画布大小为450像素* 450像素 ,那么它应该转换成1000像素* 1000像素 。
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; 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, width:1000, height:10000}); 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(); }
canvas { border: 1px solid black; }
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> <input type="file" id="file"> <canvas id="canvas" width="400" height="400"></canvas> <a href='' id='txt' target="_blank">Click Me!!</a> <br /> <img id="preview" />
我尝试用canvas.toDataUrl({format:'png',quality:0.8,width:1000,height:1000})但这是行不通的。
演示JSFIDDLE。 https://jsfiddle.net/varunPes/8gt6d7op/13/
只需将width:1000, height:1000
到var oImg = img.set({left: 50, top: 100, angle: 00}).scale(0.9);
完整代码:
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; fabric.Image.fromURL(data, function (img) { var oImg = img.set({left: 0, top: 0, angle: 00}).scale(0.9); canvas.add(oImg).renderAll(); var a = canvas.setActiveObject(oImg); var dataURL = canvas.toDataURL({format: 'png', quality: 0.8}); }); }; reader.readAsDataURL(file); }); document.querySelector('#txt').onclick = function (e) { e.preventDefault(); canvas.deactivateAll().renderAll(); increaseImg(canvas.toDataURL(), function(dataURL) { document.querySelector('#preview').src = dataURL; }); } function increaseImg(src, callback) { var n_canvas = $('<canvas width="1800" height="2000" />')[0], n_ctx = n_canvas.getContext('2d'), n_img = new Image(); n_img.onload = function() { n_ctx.drawImage(n_img, 0, 0, n_canvas.width, n_canvas.height); callback(n_canvas.toDataURL()); } n_img.src = src; }
canvas{ border: 1px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> <input type="file" id="file"><br /> <canvas id="canvas" width="450" height="450"></canvas> <a href='' id='txt' target="_blank">Click Me!!</a> <br /> <img id="preview" />
查看https://jsfiddle.net/8gt6d7op/14/是否有效。 toDataURL仅适用于画布中的任何内容,因此您无法指定大小。 尺寸已在画布中。
您可以使用所需大小的第二个画布,并使用该画布填充图像。
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file">
<canvas id="canvas" width="400" height="400"></canvas>
<a href='' id='txt' target="_blank">Click Me!!</a>
<br />
<img id="preview" />
<canvas id="canvas2" width="1000" height="1000" style="display:none;"></canvas>
var canvas = new fabric.Canvas('canvas');
var canvas2 = new fabric.Canvas('canvas2');
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;
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 50, top: 100, angle: 00}).scale(0.9);
canvas.add(oImg).renderAll();
canvas2.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
var dataURL = canvas2.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();
canvas2.deactivateAll().renderAll();
document.querySelector('#preview').src = canvas2.toDataURL();
}
您的代码很好,不需要任何大的更改。 如果要导出各种尺寸的图像,请尝试此操作。
我创建了两个导出链接,一个用于宽度500,一个用于1000。如您所见,您可以直接导出图像而不是画布。
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; fabric.Image.fromURL(data, function (img) { var oImg = img.set({left: 50, top: 100, angle: 00}).scale(0.9); canvas.add(oImg); }); }; reader.readAsDataURL(file); }); document.querySelector('#txt').onclick = function (e) { _export(e, 500); } document.querySelector('#txt2').onclick = function (e) { _export(e, 1000); } function _export(e, width) { e.preventDefault(); var a = canvas.getActiveObject(); canvas.deactivateAll().renderAll(); var mult = width / a.width; document.querySelector('#preview').src = a.toDataURL({multiplier: mult}); }
canvas { border: 1px solid black; }
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> <input type="file" id="file"> <canvas id="canvas" width="400" height="400"></canvas> <a href='' id='txt' target="_blank">Click Me!! 500</a><br /> <a href='' id='txt2' target="_blank">Click Me!! 1000</a> <br /> <img id="preview" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.