在画布上保留原始图像质量 [英] Preserve original quality of image on canvas
问题描述
我使用 fabric.js 。我在画布上上传多个图像。上传图像后。然后canvas通过 toDataURL（）转换为图像。我想将此转换的图像粘贴在尺寸为 2000x2000 的T恤上。但是这个图片尺寸很小，当我尝试增加它的大小时，由于拉伸而变得模糊
我需要用户上传的大小相同的图片，而不是来自缩小的图像的放大版本。例如，如果用户上传了大小 1500x1500 的图片，那么我需要大小 2000x2500 的图片，而不是 400x400 。
我已经看过99Thsirts.com网站，但我不知道如何处理护照大小的图片。
我只想清除已上传的自订图片不模糊），因为我实现了自定义T恤。
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 < 1000 || img.height< 1000）{alert（upload image should be greater than 1000px * 1000px）; canvas.getActiveObject（）。remove（）; }}; fabric.Image.fromURL（data，function（img）{var oImg = img.set（{left：50，top：100，width：100，height：100，angle：00}）。 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（）;}
canvas {border：1px solid black;}
< script src =https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js>< / script>< input type =fileid =file>< canvas id =canvaswidth =400height =400>< / canvas>< a href =''id ='txt'target =_ blank> < / a>< br />< img id =preview/>
p>
https://jsfiddle.net/varunPes/ 8gt6d7op / 21 /
请分享您的想法。
如果您将图片调整为100x100像素，那么您将拥有100x100的图片。
加载图像时，不要更改图像的宽度和高度。此外，没有理由使用图像的onload函数和imageFromURL函数。
说，所以，加载你的图像，缩放到90px的宽度（现在你在做
画布为400像素，当您导出时，您将指定一个乘数为5，以获得一个2000px画布。
图像将被拉伸而不会失去其原始分辨率。它当然不会改善其标准分辨率。
var canvas = new fabric.Canvas（'canvas'）; document.getElementById（'文件'）。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.onload = function（）{if（img.width< 1000 || img.height< 1000）{alert（upload image should be greater then 1000px * 1000px）; return;} var oImg = new fabric.Image（img）; var oImg = oImg.set（{left：50，top：100，angle：00}）scaleToWidth（90）; canvas.add （oImg）; canvas.setActiveObject（oImg）;}; img.src = data;}; reader.readAsDataURL（file）;}）; document.querySelector（'＃txt'）。onclick = function（e）{e。 preventDefault（）; canvas.deactivateAll（）; document.querySelector（'＃preview'）。src = canvas.toDataURL（{multiplier：5}）;}
canvas {border：1px solid black;}
< script src =https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js>< / script>< input type =fileid =file>< canvas id =canvaswidth =400height =400>< / canvas>< a href =''id ='txt'target = _blank>汇出我5x较大（400x5 = 2000）< / a>< br />< img id =preview/>
I am using fabric.js. I am uploading multiple image in canvas. After uploading the image. Then canvas is converting into image by toDataURL(). I want to paste this converted image on a T-Shirt having size of 2000x2000. But this image is of small size and when I try to increase its size it is getting blurred due to stretching
I need image of same size what user has uploaded, instead of a scaled up version from a scaled down image. E.g, if user uploaded an image of size 1500x1500 then from canvas I need image of size 2000x2500 only instead of 400x400.
I have seen 99Thsirts.com website but I don't have any idea how to handle passport size image.
I want only clean Uploaded customize image (not blurred) because I'm implementing customize T-shirt.
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 < 1000 || img.height < 1000)
{
alert("upload image should be greater then 1000px*1000px");
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();
}
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" />
https://jsfiddle.net/varunPes/8gt6d7op/21/
Please share your ideas.
If you resize the image to 100x100 pixels, then you will have a 100x100 image. Do not change width and height of your image when you load it. Also there is no reason to use a image onload function and an imageFromURL function.
Said so, load your image, scale it to a width of 90px ( now you are doing 100 and scale of 0.9 so is 90px), place it on canvas.
The canvas is 400px, when you will export it you will specify a multiplier of 5 to get a 2000px canvas. The image will be stretched without loosing its original resolution. It will not improve over its standard resolution of course.
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.onload = function () {
if (img.width < 1000 || img.height < 1000)
{
alert("upload image should be greater then 1000px*1000px");
return;
}
var oImg = new fabric.Image(img);
var oImg = oImg.set({left: 50, top: 100, angle: 00}).scaleToWidth(90);
canvas.add(oImg);
canvas.setActiveObject(oImg);
};
img.src = data;
};
reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function (e) {
e.preventDefault();
canvas.deactivateAll();
document.querySelector('#preview').src = canvas.toDataURL({multiplier: 5});
}
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">Export me 5x Bigger ( 400x5=2000)</a>
<br />
<img id="preview" />
这篇关于在画布上保留原始图像质量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
