blocks|key|223273|text|我创建了一个库，它允许你在保留所有颜色数据的同时，降低任何百分比。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|223274|https://github.com/danschumann/limby-resize/blob/master/lib/canvas_resize.js|offset|length|223275|可以包含在浏览器中的文件。结果看起来像photoshop或image+magick，保留了所有的颜色数据，平均像素，而不是取附近的数据并丢弃其他数据。它不使用公式来猜测平均值，而是采用精确的平均值。|223276|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|24|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

I created a library that allows you to downstep any percentage while keeping all the color data.

<a href="https://github.com/danschumann/limby-resize/blob/master/lib/canvas_resize.js" rel="noreferrer">https://github.com/danschumann/limby-resize/blob/master/lib/canvas_resize.js</a>

That file you can include in the browser. The results will look like photoshop or image magick, preserving all the color data, averaging pixels, rather than taking nearby ones and dropping others. It doesn't use a formula to guess the averages, it takes the exact average.

blocks|key|6727|text|我创建了一个可重用的Angular服务，为感兴趣的任何人处理高质量的图像/画布大小调整：https://gist.github.com/transitive-bullshit/37bac5e741eaec60e983|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|6728|该服务包括两种解决方案，因为它们都有自己的优缺点。lanczos卷积方法以更慢为代价获得更高的质量，而逐步向下缩放方法产生合理的抗锯齿结果，并且速度明显更快。|6729|示例用法：|6730|angular.module('demo').controller('ExampleCtrl',+function+(imageService)+{
++//+EXAMPLE+USAGE
++//+NOTE:+it's+bad+practice+to+access+the+DOM+inside+a+controller,+
++//+but+this+is+just+to+show+the+example+usage.

++//+resize+by+lanczos-sinc+filter
++imageService.resize($('#myimg')[0],+256,+256)
++++.then(function+(resizedImage)+{
++++++//+do+something+with+resized+image
++++})

++//+resize+by+stepping+down+image+size+in+increments+of+2x
++imageService.resizeStep($('#myimg')[0],+256,+256)
++++.then(function+(resizedImage)+{
++++++//+do+something+with+resized+image
++++})
})|code-block|syntax|javascript|6731|entityMap|0|LINK|mutability|MUTABLE|url|https://gist.github.com/transitive-bullshit/37bac5e741eaec60e983^0|18|1S|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|C|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

I created a reusable Angular service to handle high quality resizing of images / canvases for anyone who's interested: <a href="https://gist.github.com/transitive-bullshit/37bac5e741eaec60e983" rel="nofollow noreferrer">https://gist.github.com/transitive-bullshit/37bac5e741eaec60e983</a>

The service includes two solutions because they both have their own pros / cons. The lanczos convolution approach is higher quality at the cost of being slower, whereas the step-wise downscaling approach produces reasonably antialiased results and is significantly faster.

Example usage:

<pre><code>angular.module('demo').controller('ExampleCtrl', function (imageService) {
 // EXAMPLE USAGE
 // NOTE: it's bad practice to access the DOM inside a controller, 
 // but this is just to show the example usage.

 // resize by lanczos-sinc filter
 imageService.resize($('#myimg')[0], 256, 256)
 .then(function (resizedImage) {
 // do something with resized image
 })

 // resize by stepping down image size in increments of 2x
 imageService.resizeStep($('#myimg')[0], 256, 256)
 .then(function (resizedImage) {
 // do something with resized image
 })
})
</code></pre>

blocks|key|6757|text|因为Trung+Le+Nguyen+Nhat's+fiddle根本不正确(它在最后一步中只使用了原始图像)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|6758|我写了我自己的关于性能比较的小提琴：|6759|FIDDLE|6760|基本上就是：|6761|img.onload+=+function()+{
+++var+canvas+=+document.createElement('canvas'),
+++++++ctx+=+canvas.getContext("2d"),
+++++++oc+=+document.createElement('canvas'),
+++++++octx+=+oc.getContext('2d');

+++canvas.width+=+width;+//+destination+canvas+size
+++canvas.height+=+canvas.width+*+img.height+/+img.width;

+++var+cur+=+{
+++++width:+Math.floor(img.width+*+0.5),
+++++height:+Math.floor(img.height+*+0.5)
+++}

+++oc.width+=+cur.width;
+++oc.height+=+cur.height;

+++octx.drawImage(img,+0,+0,+cur.width,+cur.height);

+++while+(cur.width+*+0.5+>+width)+{
+++++cur+=+{
+++++++width:+Math.floor(cur.width+*+0.5),
+++++++height:+Math.floor(cur.height+*+0.5)
+++++};
+++++octx.drawImage(oc,+0,+0,+cur.width+*+2,+cur.height+*+2,+0,+0,+cur.width,+cur.height);
+++}

+++ctx.drawImage(oc,+0,+0,+cur.width,+cur.height,+0,+0,+canvas.width,+canvas.height);
}|code-block|syntax|javascript|6762|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/19262141/resize-image-with-javascript-canvas-smoothly/37676395#37676395|1|http://jsfiddle.net/sp3c7jeq/^0|2|T|0|0|0|0|6|1|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|H|3|I|5|6|7|17|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|18|8|@]|9|@]|C|$M|N]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|X]]]]

Since <a href="https://stackoverflow.com/questions/19262141/resize-image-with-javascript-canvas-smoothly/37676395#37676395">Trung Le Nguyen Nhat's fiddle</a> isn't correct at all 
(it just uses the original image in the last step) 
I wrote my own general fiddle with performance comparison:

<a href="http://jsfiddle.net/sp3c7jeq/" rel="noreferrer">FIDDLE</a>

Basically it's:

<pre><code>img.onload = function() {
 var canvas = document.createElement('canvas'),
 ctx = canvas.getContext("2d"),
 oc = document.createElement('canvas'),
 octx = oc.getContext('2d');

 canvas.width = width; // destination canvas size
 canvas.height = canvas.width * img.height / img.width;

 var cur = {
 width: Math.floor(img.width * 0.5),
 height: Math.floor(img.height * 0.5)
 }

 oc.width = cur.width;
 oc.height = cur.height;

 octx.drawImage(img, 0, 0, cur.width, cur.height);

 while (cur.width * 0.5 &gt; width) {
 cur = {
 width: Math.floor(cur.width * 0.5),
 height: Math.floor(cur.height * 0.5)
 };
 octx.drawImage(oc, 0, 0, cur.width * 2, cur.height * 2, 0, 0, cur.width, cur.height);
 }

 ctx.drawImage(oc, 0, 0, cur.width, cur.height, 0, 0, canvas.width, canvas.height);
}
</code></pre>

blocks|key|6783|text|我写了一个小的js实用程序来在前端裁剪和调整图像的大小。这是GitHub项目上的link。你也可以从最终图像中获取blob来发送它。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|6784|import+imageSqResizer+from+'./image-square-resizer.js'

let+resizer+=+new+imageSqResizer(
++++'image-input',
++++300,
++++(dataUrl)+=>+
++++++++document.getElementById('image-output').src+=+dataUrl;
);
//Get+blob
let+formData+=+new+FormData();
formData.append('files[0]',+resizer.blob);

//get+dataUrl
document.getElementById('image-output').src+=+resizer.dataUrl;|code-block|syntax|javascript|6785|entityMap|0|LINK|mutability|MUTABLE|url|https://diyazy.github.io/image-square-resizer/^0|14|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

I wrote small js-utility to crop and resize image on front-end. Here is <a href="https://diyazy.github.io/image-square-resizer/" rel="nofollow noreferrer">link</a> on GitHub project. Also you can get blob from final image to send it.

<pre><code>import imageSqResizer from './image-square-resizer.js'

let resizer = new imageSqResizer(
 'image-input',
 300,
 (dataUrl) =&gt; 
 document.getElementById('image-output').src = dataUrl;
);
//Get blob
let formData = new FormData();
formData.append('files[0]', resizer.blob);

//get dataUrl
document.getElementById('image-output').src = resizer.dataUrl;
</code></pre>

blocks|key|223403|text|我不明白为什么没有人建议使用createImageBitmap。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|223404|createImageBitmap(
++++document.getElementById('image'),+
++++{+resizeWidth:+300,+resizeHeight:+234,+resizeQuality:+'high'+}
)
.then(imageBitmap+=>+
++++document.getElementById('canvas').getContext('2d').drawImage(imageBitmap,+0,+0)
);|code-block|syntax|javascript|223405|效果很好(假设您为image和canvas设置了ids+)。|223406|entityMap^0|E|H|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

I don't understand why nobody is suggesting <code>createImageBitmap</code>. 

<pre><code>createImageBitmap(
 document.getElementById('image'), 
 { resizeWidth: 300, resizeHeight: 234, resizeQuality: 'high' }
)
.then(imageBitmap =&gt; 
 document.getElementById('canvas').getContext('2d').drawImage(imageBitmap, 0, 0)
);
</code></pre>

works beautifully (assuming you set ids for image and canvas).

blocks|key|223442|text|以下是我的代码，我希望它对SO社区中的某些人有用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|223443|您可以将目标图像维度作为参数包含在脚本调用中。这将是图像宽度或高度的结果值，以较大者为准。较小的尺寸会调整大小，保持图像的纵横比不变。您还可以在脚本中硬编码默认目标大小。|223444|您可以轻松地更改脚本以满足您的特定需求，例如您希望输出的图像类型(默认为"+image+/png")，并按百分比决定您希望调整图像大小以获得更好结果的步数(请参阅代码中的常量percentStep+)。|223445|+++const+ResizeImage+=+(+_+=>+{

const+MAX_LENGTH+=+260;+++++//+default+target+size+of+largest+dimension,+either+witdth+or+height
const+percentStep+=+.3;+++++//+resizing+steps+until+reaching+target+size+in+percents+(30%25+default)
const+canvas+=+document.createElement("canvas");
const+canvasContext+=+canvas.getContext("2d");
const+image+=+new+Image();

const+doResize+=+(callback,+maxLength)+=>+{

++++//+abort+with+error+if+image+has+a+dimension+equal+to+zero
++++if(image.width+==+0+%7C%7C+image.height+==+0)+{
++++++++return+{blob:+null,+error:+"either+image+width+or+height+was+zero+"};
++++}

++++//+use+caller+dimension+or+default+length+if+none+provided
++++const+length+=+maxLength+==+null++?+MAX_LENGTH+:+maxLength;

++++canvas.width+=+image.width;
++++canvas.height+=+image.height;
++++canvasContext.drawImage(image,+0,+0,+image.width,+image.height);
++++//+if+image+size+already+within+target+size,+just+copy+and+return+blob
++++if(image.width+<=+length+&&+image.height+<=+length)+{
++++++++canvas.toBlob(+blob+=>+{
++++++++++++callback({+blob:+blob,+error:+null+});
++++++++},+"image/png",+1);
++++++++return;
++++}

++++var+startDim+=+Math.max(image.width,+image.height);
++++var+startSmallerDim+=+Math.min(image.width,+image.height);

++++//+gap+to+decrease+in+size+until+we+reach+the+target+size,
++++//+be+it+by+decreasing+the+image+width+or+height,
++++//+whichever+is+largest
++++const+gap+=+startDim+-+length;
++++//+step+length+of+each+resizing+iteration
++++const+step+=+parseInt(percentStep*gap);
++++//++no.+of+iterations
++++var+nSteps+=+0;
++++if(step+==+0)+{
++++++++step+=+1;
++++}+else+{
++++++++nSteps+=+parseInt(gap/step);
++++}
++++//+length+of+last+additional+resizing+step,+if+needed
++++const+lastStep+=+gap+%25+step;
++++//+aspect+ratio+=+value+by+which+we'll++multiply+the+smaller+dimension
++++//+in+order+to+keep+the+aspect+ratio+unchanged+in+each+iteration
++++const+ratio+=+startSmallerDim/startDim;

++++var+newDim;++++++++++//+calculated+new+length+for+the+bigger+dimension+of+the+image,+be+it+image+width+or+height
++++var+smallerDim;+++++//+length+along+the+smaller+dimension+of+the+image,+width+or+height
++++for(var+i+=+0;+i+<+nSteps;+i%2B%2B)+{
++++++++//+decrease+longest+dimension+one+step+in+pixels
++++++++newDim+=+startDim+-+step;
++++++++//+decrease+shortest+dimension+proportionally,+so+as+to+keep+aspect+ratio
++++++++smallerDim+=+parseInt(ratio*newDim);
++++++++//+assign+calculated+vars+to+their+corresponding+canvas+dimension,+width+or+height
++++++++if(image.width+>+image.height)+{
++++++++++++[canvas.width,+canvas.height]++=+[newDim,+smallerDim];
++++++++}+else+{
++++++++++++[canvas.width,+canvas.height]+=+[smallerDim,+newDim];
++++++++}
++++++++//+draw+image+one+step+smaller
++++++++canvasContext.drawImage(canvas,+0,+0,+canvas.width,+canvas.height);
++++++++//+cycle+var+startDim+for+new+loop
++++++++startDim+=+newDim;
++++}

++++//+do+last+missing+resizing+step+to+finally+reach+target+image+size
++++if(lastStep+>+0)+{
++++++++if(image.width+>+image.height)+{
++++++++++++[canvas.width,+canvas.height]++=+[startDim+-+lastStep,+parseInt(ratio*(startDim+-+lastStep))];
++++++++}+else+{
++++++++++++[canvas.width,+canvas.height]+=+[parseInt(ratio*(startDim+-lastStep)),+startDim+-+lastStep];
++++++++}
++++++++canvasContext.drawImage(image,+0,+0,+canvas.width,+canvas.height);
++++}

++++//+send+blob+to+caller
++++canvas.toBlob(+blob+=>+{
++++++++callback({blob:+blob,+error:+null});
++++},+"image/png",+1);

};

const+resize+=+async+(imgSrc,+callback,+maxLength)+=>+{
++++image.src+=+imgSrc;
++++image.onload+=+_+=>+{
+++++++doResize(callback,+maxLength);
++++};
};

return+{+resize:+resize+}

})();|code-block|syntax|javascript|223446|用法：|223447|ResizeImage.resize("./path/to/image/or/blob/bytes/to/resize",+imageObject+=>+{
++++if(imageObject.error+!=+null)+{
++++++//+handle+errors+here
++++++console.log(imageObject.error);
++++++return;
++++}
++++//+do+whatever+you+want+with+the+blob,+like+assinging+it+to
++++//+an+img+element,+or+uploading+it+to+a+database
++++//+...
++++document.querySelector("#my-image").src+=+imageObject.blob;
++++//+...
},+300);|223448|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Here is my code, which I hope may be useful for someone out there in the SO community:
You can include your target image dimension as a param in your script call. That will be the result value of your image width or height, whichever is bigger. The smaller dimension is resized keeping your image aspect ratio unchanged. You can also hard-code your default target size in the script.
You can easily change the script to suit your specific needs, such as the image type you want (default is &quot;image/png&quot;) for an output and decide in how many steps percentwise you want to resize your image for a finer result (see const percentStep in code).
<pre><code> const ResizeImage = ( _ =&gt; {

const MAX_LENGTH = 260; // default target size of largest dimension, either witdth or height
const percentStep = .3; // resizing steps until reaching target size in percents (30% default)
const canvas = document.createElement(&quot;canvas&quot;);
const canvasContext = canvas.getContext(&quot;2d&quot;);
const image = new Image();

const doResize = (callback, maxLength) =&gt; {

 // abort with error if image has a dimension equal to zero
 if(image.width == 0 || image.height == 0) {
 return {blob: null, error: &quot;either image width or height was zero &quot;};
 }

 // use caller dimension or default length if none provided
 const length = maxLength == null ? MAX_LENGTH : maxLength;

 canvas.width = image.width;
 canvas.height = image.height;
 canvasContext.drawImage(image, 0, 0, image.width, image.height);
 // if image size already within target size, just copy and return blob
 if(image.width &lt;= length &amp;&amp; image.height &lt;= length) {
 canvas.toBlob( blob =&gt; {
 callback({ blob: blob, error: null });
 }, &quot;image/png&quot;, 1);
 return;
 }

 var startDim = Math.max(image.width, image.height);
 var startSmallerDim = Math.min(image.width, image.height);

 // gap to decrease in size until we reach the target size,
 // be it by decreasing the image width or height,
 // whichever is largest
 const gap = startDim - length;
 // step length of each resizing iteration
 const step = parseInt(percentStep*gap);
 // no. of iterations
 var nSteps = 0;
 if(step == 0) {
 step = 1;
 } else {
 nSteps = parseInt(gap/step);
 }
 // length of last additional resizing step, if needed
 const lastStep = gap % step;
 // aspect ratio = value by which we'll multiply the smaller dimension
 // in order to keep the aspect ratio unchanged in each iteration
 const ratio = startSmallerDim/startDim;

 var newDim; // calculated new length for the bigger dimension of the image, be it image width or height
 var smallerDim; // length along the smaller dimension of the image, width or height
 for(var i = 0; i &lt; nSteps; i++) {
 // decrease longest dimension one step in pixels
 newDim = startDim - step;
 // decrease shortest dimension proportionally, so as to keep aspect ratio
 smallerDim = parseInt(ratio*newDim);
 // assign calculated vars to their corresponding canvas dimension, width or height
 if(image.width &gt; image.height) {
 [canvas.width, canvas.height] = [newDim, smallerDim];
 } else {
 [canvas.width, canvas.height] = [smallerDim, newDim];
 }
 // draw image one step smaller
 canvasContext.drawImage(canvas, 0, 0, canvas.width, canvas.height);
 // cycle var startDim for new loop
 startDim = newDim;
 }

 // do last missing resizing step to finally reach target image size
 if(lastStep &gt; 0) {
 if(image.width &gt; image.height) {
 [canvas.width, canvas.height] = [startDim - lastStep, parseInt(ratio*(startDim - lastStep))];
 } else {
 [canvas.width, canvas.height] = [parseInt(ratio*(startDim -lastStep)), startDim - lastStep];
 }
 canvasContext.drawImage(image, 0, 0, canvas.width, canvas.height);
 }

 // send blob to caller
 canvas.toBlob( blob =&gt; {
 callback({blob: blob, error: null});
 }, &quot;image/png&quot;, 1);

};

const resize = async (imgSrc, callback, maxLength) =&gt; {
 image.src = imgSrc;
 image.onload = _ =&gt; {
 doResize(callback, maxLength);
 };
};

return { resize: resize }

})();
</code></pre>
Usage:
<pre><code>ResizeImage.resize(&quot;./path/to/image/or/blob/bytes/to/resize&quot;, imageObject =&gt; {
 if(imageObject.error != null) {
 // handle errors here
 console.log(imageObject.error);
 return;
 }
 // do whatever you want with the blob, like assinging it to
 // an img element, or uploading it to a database
 // ...
 document.querySelector(&quot;#my-image&quot;).src = imageObject.blob;
 // ...
}, 300);
</code></pre>

blocks|key|6892|text|我通过对画布使用scale解决了这个问题，在我的例子中，图像质量变得非常好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6893|因此，首先我在画布中缩放内容：|6894|ctx.scale(2,+2)|code-block|syntax|javascript|6895|然后使用css扩展画布标签：|6896|#myCanvas+{+transform:+scale(0.5);+}|6897|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I solved this by using scale for canvas and the image quality in my case becomes really good.
So first I scale the content inside of canvas:
<pre><code>ctx.scale(2, 2)
</code></pre>
And then scale out the canvas tag with css:
<pre><code>#myCanvas { transform: scale(0.5); }
</code></pre>

blocks|key|6909|text|export+const+resizeImage+=+(imageFile,+size+=+80)+=>+{
++++
++++let+resolver+=+()=>{};

++++let+reader+=+new+FileReader();

++++reader.onload+=+function+(e)+{
++++++++let+img+=+document.createElement("img");
++++++++img.onload+=+function+(event)+{
++++++++++++//+Dynamically+create+a+canvas+element
++++++++++++let+canvas+=+document.createElement("canvas");

++++++++++++canvas.width=size;
++++++++++++canvas.height=size;

++++++++++++//+let+canvas+=+document.getElementById("canvas");
++++++++++++let+ctx+=+canvas.getContext("2d");

++++++++++++//+Actual+resizing
++++++++++++ctx.drawImage(img,+0,+0,+size,+size);

++++++++++++//+Show+resized+image+in+preview+element
++++++++++++let+dataurl+=+canvas.toDataURL(imageFile.type);

++++++++++++resolver(dataurl);
++++++++}
++++++++img.src+=+e.target.result;
++++}

++++reader.readAsDataURL(imageFile);

++++
++++return+new+Promise((resolve,+reject)+=>+{
++++++++resolver+=+resolve;
++++})
};|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|6910|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>export const resizeImage = (imageFile, size = 80) =&gt; {
 
 let resolver = ()=&gt;{};

 let reader = new FileReader();

 reader.onload = function (e) {
 let img = document.createElement(&quot;img&quot;);
 img.onload = function (event) {
 // Dynamically create a canvas element
 let canvas = document.createElement(&quot;canvas&quot;);

 canvas.width=size;
 canvas.height=size;

 // let canvas = document.getElementById(&quot;canvas&quot;);
 let ctx = canvas.getContext(&quot;2d&quot;);

 // Actual resizing
 ctx.drawImage(img, 0, 0, size, size);

 // Show resized image in preview element
 let dataurl = canvas.toDataURL(imageFile.type);

 resolver(dataurl);
 }
 img.src = e.target.result;
 }

 reader.readAsDataURL(imageFile);

 
 return new Promise((resolve, reject) =&gt; {
 resolver = resolve;
 })
};
</code></pre>

I'm trying to resize some images with canvas but I'm clueless on how to smoothen them.
On photoshop, browsers etc.. there are a few algorithms they use (e.g. bicubic, bilinear) but I don't know if these are built into canvas or not.

Here's my fiddle: <a href="http://jsfiddle.net/EWupT/" rel="noreferrer">http://jsfiddle.net/EWupT/</a>

<pre><code>var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width=300
canvas.height=234
ctx.drawImage(img, 0, 0, 300, 234);
document.body.appendChild(canvas);
</code></pre>

The first one is a normal resized image tag, and the second one is canvas. Notice how the canvas one is not as smooth. How can I achieve 'smoothness'?

Resize image with javascript canvas (smoothly)

我正在尝试用画布调整一些图像的大小，但我不知道如何平滑它们。在photoshop、浏览器等上。有一些他们使用的算法(例如双三次，双线性)，但我不知道这些算法是否内置到画布中。这是我的小提琴：var canvas = document.createElement('canvas');var ctx = canvas.ge...

问使用javascript画布调整图像大小(平滑)
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用javascript画布调整图像大小(平滑)EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用javascript画布调整图像大小(平滑)
EN