{"id":370,"date":"2016-07-05T16:27:57","date_gmt":"2016-07-05T15:27:57","guid":{"rendered":"https:\/\/solidt.eu\/blog\/?p=370"},"modified":"2022-07-25T08:35:45","modified_gmt":"2022-07-25T07:35:45","slug":"javascript-resize-images","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/javascript-resize-images\/","title":{"rendered":"Javascript resize images (Hermite)"},"content":{"rendered":"<p>Source: <a href=\"https:\/\/github.com\/viliusle\/Hermite-resize\/blob\/master\/hermite.js\">https:\/\/github.com\/viliusle\/Hermite-resize\/blob\/master\/hermite.js<\/a><br \/>\nhttp:\/\/jsfiddle.net\/9g9Nv\/96\/<\/p>\n<pre lang=\"javascript\">\r\nvar canvas = document.getElementById(\"cc\");\r\nvar ctx = canvas.getContext(\"2d\");\r\n\r\nvar img = new Image();\r\nimg.crossOrigin = \"Anonymous\"; \/\/cors support\r\nimg.onload = function(){\r\n    var W = img.width;\r\n    var H = img.height;\r\n    canvas.width = W;\r\n    canvas.height = H;\r\n    ctx.drawImage(img, 0, 0); \/\/draw image\r\n    \r\n    \/\/resize by ratio\r\n    \/\/var ratio = 0.43895525; \/\/from 0 to 1\r\n    \/\/resample_hermite(canvas, W, H, Math.round(W*ratio), Math.round(H*ratio));\r\n    \r\n    \/\/resize manually\r\n    resample_hermite(canvas, W, H, 439, 222);\r\n}\r\nimg.src = 'http:\/\/i.imgur.com\/8VsK7gS.png';\r\n\r\n\r\n\r\n\r\nfunction resample_hermite(canvas, W, H, W2, H2){\r\n\tvar time1 = Date.now();\r\n\tW2 = Math.round(W2);\r\n\tH2 = Math.round(H2);\r\n\tvar img = canvas.getContext(\"2d\").getImageData(0, 0, W, H);\r\n\tvar img2 = canvas.getContext(\"2d\").getImageData(0, 0, W2, H2);\r\n\tvar data = img.data;\r\n\tvar data2 = img2.data;\r\n\tvar ratio_w = W \/ W2;\r\n\tvar ratio_h = H \/ H2;\r\n\tvar ratio_w_half = Math.ceil(ratio_w\/2);\r\n\tvar ratio_h_half = Math.ceil(ratio_h\/2);\r\n\t\r\n\tfor(var j = 0; j < H2; j++){\r\n\t\tfor(var i = 0; i < W2; i++){\r\n\t\t\tvar x2 = (i + j*W2) * 4;\r\n\t\t\tvar weight = 0;\r\n\t\t\tvar weights = 0;\r\n\t\t\tvar weights_alpha = 0;\r\n\t\t\tvar gx_r = gx_g = gx_b = gx_a = 0;\r\n\t\t\tvar center_y = (j + 0.5) * ratio_h;\r\n\t\t\tfor(var yy = Math.floor(j * ratio_h); yy < (j + 1) * ratio_h; yy++){\r\n\t\t\t\tvar dy = Math.abs(center_y - (yy + 0.5)) \/ ratio_h_half;\r\n\t\t\t\tvar center_x = (i + 0.5) * ratio_w;\r\n\t\t\t\tvar w0 = dy*dy \/\/pre-calc part of w\r\n\t\t\t\tfor(var xx = Math.floor(i * ratio_w); xx < (i + 1) * ratio_w; xx++){\r\n\t\t\t\t\tvar dx = Math.abs(center_x - (xx + 0.5)) \/ ratio_w_half;\r\n\t\t\t\t\tvar w = Math.sqrt(w0 + dx*dx);\r\n\t\t\t\t\tif(w >= -1 && w <= 1){\r\n\t\t\t\t\t\t\/\/hermite filter\r\n\t\t\t\t\t\tweight = 2 * w*w*w - 3*w*w + 1;\r\n\t\t\t\t\t\tif(weight > 0){\r\n\t\t\t\t\t\t\tdx = 4*(xx + yy*W);\r\n\t\t\t\t\t\t\t\/\/alpha\r\n\t\t\t\t\t\t\tgx_a += weight * data[dx + 3];\r\n\t\t\t\t\t\t\tweights_alpha += weight;\r\n\t\t\t\t\t\t\t\/\/colors\r\n\t\t\t\t\t\t\tif(data[dx + 3] < 255)\r\n\t\t\t\t\t\t\t\tweight = weight * data[dx + 3] \/ 250;\r\n\t\t\t\t\t\t\tgx_r += weight * data[dx];\r\n\t\t\t\t\t\t\tgx_g += weight * data[dx + 1];\r\n\t\t\t\t\t\t\tgx_b += weight * data[dx + 2];\r\n\t\t\t\t\t\t\tweights += weight;\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\t\t\r\n\t\t\t\t}\r\n\t\t\tdata2[x2]     = gx_r \/ weights;\r\n\t\t\tdata2[x2 + 1] = gx_g \/ weights;\r\n\t\t\tdata2[x2 + 2] = gx_b \/ weights;\r\n\t\t\tdata2[x2 + 3] = gx_a \/ weights_alpha;\r\n\t\t\t}\r\n\t\t}\r\n\tconsole.log(\"hermite = \"+(Math.round(Date.now() - time1)\/1000)+\" s\");\r\n\tcanvas.getContext(\"2d\").clearRect(0, 0, Math.max(W, W2), Math.max(H, H2));\r\n    canvas.width = W2;\r\n    canvas.height = H2;\r\n\tcanvas.getContext(\"2d\").putImageData(img2, 0, 0);\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Source: https:\/\/github.com\/viliusle\/Hermite-resize\/blob\/master\/hermite.js http:\/\/jsfiddle.net\/9g9Nv\/96\/ var canvas = document.getElementById(&#8220;cc&#8221;); var ctx = canvas.getContext(&#8220;2d&#8221;); var img = new Image(); img.crossOrigin = &#8220;Anonymous&#8221;; \/\/cors support img.onload = function(){ var W = img.width; var H = img.height; canvas.width = W; canvas.height = H; ctx.drawImage(img, 0, 0); \/\/draw image \/\/resize by ratio \/\/var ratio = 0.43895525; \/\/from 0 to 1 \/\/resample_hermite(canvas, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5,4],"tags":[],"class_list":["post-370","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/370","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=370"}],"version-history":[{"count":3,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/370\/revisions"}],"predecessor-version":[{"id":395,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/370\/revisions\/395"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=370"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=370"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}