Compress image using HTML5 canvas in JavaScript and resize SVG image
Resize image
Compress an image by using the Canvas. in my case the original image is dataurl, you also can use other type image source, like image object or blob object.
// compress given data url and return a new compressed dataUrl
function compress(dataUrl, scale, callback) {
var s = parseFloat(scale);
// check scale, make sure it is in 0-1;
if (isNaN(s) || s < 0 || s >= 1) {
callback(dataUrl)
}
// using canvas compress image
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
img.onload = function () {
// calculate target width and height
var targetWidth = img.width * s;
var targetHeight = img.height * s;
// set canvas width and height
canvas.width = targetWidth;
canvas.height = targetHeight;
// clear canvas
context.clearRect(0, 0, targetWidth, targetHeight);
// draw image
context.drawImage(img, 0, 0, targetWidth, targetHeight);
// convert canvas to dataurl
callback(canvas.toDataURL());
}
img.src = dataUrl;
}
Resize SVG
it is very easy to resize the svg, just change the size of viewport.
original svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="441pt" height="358pt" viewBox="0 0 441 358" version="1.1">
<g id="surface6">
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 0.875117 1.494473 L -0.00832031 2.004199 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 0.875 1.686973 L 0.15832 2.100449 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 1.730313 3.009434 L 1.730313 1.998887 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 1.563633 2.913418 L 1.563633 2.09502 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 0.0000000000745058 1.989746 L 0.0000000000745058 3.014004 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 1.738633 2.00373 L 0.858438 1.494473 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M -0.00839844 2.999551 L 0.877305 3.504082 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 0.158242 2.902676 L 0.876563 3.311855 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 0.860703 3.50416 L 1.738594 2.99502 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 1.721953 2.00373 L 2.604883 1.494512 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 2.596172 0.488965 L 2.596563 1.499316 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 2.762891 0.585215 L 2.763203 1.402988 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 4.335781 0.504668 L 3.451953 -0.00478516 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 4.169375 0.601113 L 3.451992 0.187598 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 2.588242 1.494512 L 3.475586 2.006035 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 3.468594 -0.00478516 L 2.587852 0.503418 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 3.458828 2.006074 L 4.33832 1.490723 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 3.458164 1.81334 L 4.171406 1.395371 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 4.330078 1.505137 L 4.327422 0.490293 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
</g>
</svg>
You can see, the image is very big, now we change the size of viewport to 100 and 100
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100pt" height="100pt" viewBox="0 0 441 358" version="1.1">
...
</svg>
Later I will use javascript code to modify the size of viewport.
How to let SimpleMDE support superscript and subscript?
SimpleMDE doesn't support superscript and subscript. there are two ways to show sub/superscript.
Use html tags:
H<sub>2</sub>O
E =mc<sup>2</sup>
H2O
E =mc2
Use ~ and ^
H~2~O
E =mc^2^
H2O
E =mc2
SimpleMDE previews are rendered by Marked using GitHub Flavored Markdown. While Marked doesn't support using ~ and ^ mark sub/superscript. so when preview it by SimpleMDE, it will show the original code:
H~2~O
E =mc^2^
But Markdig can convert ~ and ^ to sub/superscript. so can see the sub/superscript on the blog page. because on the blog page, the content was generated by Markdig.