Databases
StackOverflow2013
Postsdbo
POWant to optimize code for captured image resize and rotate using canvas of html5, which now giving low memory warning on mobile
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWant to optimize code for captured image resize and rotate using canvas of html5, which now giving low memory warning on mobile
    primarykey
    data
    text
    <p>I have written code which will capture photo using camera and show it as snapshot. But before showing it as snapshot I am resizing image and rotate (if captured image is horizontal). This re-sized image is binary content which is less in size so uploading it on server becomes quick. Now I want to optimize code so that it will work better with low memory.</p> <p>Problem facing: On mobile device, sometimes chrome browser showing "unable to complete previous operation due to low memory".</p> <p>Could be possible solution (i think but with question): Processing image in chunks, will make think work better? </p> <p>Thanks in advance for your help.</p> <p>You may see working code <a href="http://jsfiddle.net/kamlesh_bhure/YpejU/" rel="nofollow">here</a></p> <p>or </p> <p>Working sample code </p> <pre><code>&lt;style&gt; #yourimage { width:100%; } .imgWeightHght { height: 290px !important; width: 220px !important; } .captureInsuPanel img { height: auto; width: auto; } .newLoaderMask { display: none; background: #E5E5E5; position: fixed; left: 0; top: 0; z-index: 10; width: 100%; height: 100%; opacity: 0.8; z-index: 999; } &lt;/style&gt; &lt;div id="mask" class="newLoaderMask"&gt; &lt;img src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif" width="200" id="loader" /&gt; &lt;/div&gt; &lt;input type="file" accept="image/*" capture="camera" id="takePictureField" /&gt; &lt;div class="captureInsuPanel"&gt; &lt;img id="yourimage" class="imgWeightHght" width="500" /&gt; &lt;/div&gt; &lt;script&gt; $(document).ready(function () { $("#takePictureField").on("change", gotPic); }); var max_width = 1000; var max_height = 1000; function gotPic(event) { if (event.target.files.length == 1 &amp;&amp; event.target.files[0].type.indexOf("image/") == 0) { var image = event.target.files[0]; processCapturedImage(image, 90, max_width, max_height, $("#yourimage")); } } function processCapturedImage(image, angle, max_width, max_height, thumbNailImage) { $('#mask').show(); //create a hidden canvas object we can use to create new rotated image var canvas = document.createElement('canvas'); canvas.id = "hidden_canvas_old"; canvas.style.display = "none"; document.body.appendChild(canvas); //create a hidden canvas object we can use to create the new cropped &amp;/or resized image data var canvas_new = document.createElement('canvas'); canvas_new.id = "hidden_canvas_new"; canvas_new.style.display = "none"; document.body.appendChild(canvas_new); var fileLoader = new FileReader(), imageObj = new Image(); if (image.type.indexOf("image/") == 0) { fileLoader.readAsDataURL(image); } else { alert('File is not an image'); } fileLoader.onload = function () { var data = this.result; imageObj.src = data; }; fileLoader.onabort = function () { alert("The upload was aborted."); }; fileLoader.onerror = function () { alert("An error occured while reading the file."); }; // set up the images onload function which clears the hidden canvas context, // draws the new image then gets the blob data from it imageObj.onload = function () { var imgWidth = this.width; var imgHeight = this.height; if (imgWidth &gt; imgHeight) { //Rotate horizontal image to vertical and resizing is needed rotateAndResize(this, imgWidth, imgHeight, angle, max_width, max_height, thumbNailImage); } else { //no need to rotate only resizing is needed resize(this, imgWidth, imgHeight, max_width, max_height, thumbNailImage); } }; imageObj.onabort = function () { alert("Image load was aborted."); }; imageObj.onerror = function () { alert("An error occured while loading image."); }; } function rotateAndResize(image, imgWidth, imgHeight, angle, max_width, max_height, thumbNailImage) { var canvas = document.getElementById("hidden_canvas_old"), ctx = canvas.getContext("2d"); var widthHalf = imgWidth / 2, heightHalf = imgHeight / 2; canvas.width = imgWidth; canvas.height = imgWidth; //clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); //set coordinate to rotate canvas ctx.translate(canvas.width / 2, canvas.height / 2); //rotate canvas with given angle ctx.rotate(angle * Math.PI / 180); //draw image on rotated canvas with given coordinate ctx.drawImage(image, -widthHalf, -widthHalf); ctx.restore(); var tempCanvas = document.getElementById("hidden_canvas_new"), tCtx = tempCanvas.getContext("2d"); tempCanvas.width = imgHeight; tempCanvas.height = imgWidth; /* * Crop rotated image from old canvas to remove white space * So that canvas will have only image content without extra padding */ tCtx.drawImage(canvas, canvas.width - imgHeight, 0, imgHeight, imgWidth, 0, 0, imgHeight, imgWidth); tCtx.restore(); //Delete unwanted canvas to reduce page size canvas.remove(); /** * Resizing Rotated image */ // calculate the width and height, constraining the proportions if (imgWidth &gt; imgHeight) { if (imgWidth &gt; max_width) { imgHeight = Math.round(imgHeight *= max_width / imgWidth); imgWidth = max_width; } } else { if (imgWidth &gt; max_height) { imgWidth = Math.round(imgWidth *= max_height / imgHeight); imgHeight = max_height; } } var tempCanvasTemp = tempCanvas; tempCanvas.remove(); var tempCanvas1 = document.createElement("canvas"), tCtx1 = tempCanvas1.getContext("2d"); tempCanvas1.id = 'hidden_canvas_new'; tempCanvas1.style.display = 'none'; tempCanvas1.width = imgHeight; tempCanvas1.height = imgWidth; tCtx1.drawImage(tempCanvasTemp, 0, 0, imgHeight, imgWidth); tCtx1.restore(); document.body.appendChild(tempCanvas1); thumbNailImage.attr("src", tempCanvas1.toDataURL('image/jpeg')); $('#mask').hide(); } function resize(image, imgWidth, imgHeight, max_width, max_height, thumbNailImage) { /** * Resizing image */ // calculate the width and height, constraining the proportions if (imgWidth &gt; imgHeight) { if (imgWidth &gt; max_width) { //height *= max_width / width; imgHeight = Math.round(imgHeight *= max_width / imgWidth); imgWidth = max_width; } } else { if (imgWidth &gt; max_height) { //width *= max_height / height; imgWidth = Math.round(imgWidth *= max_height / imgHeight); imgHeight = max_height; } } var tempCanvas = document.getElementById("hidden_canvas_new"), tCtx = tempCanvas.getContext("2d"); tempCanvas.width = imgWidth; tempCanvas.height = imgHeight; tCtx.drawImage(image, 0, 0, imgWidth, imgHeight); thumbNailImage.attr("src", tempCanvas.toDataURL('image/jpeg')); $('#mask').hide(); } &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USKammy
    1. USKammy
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POWant to optimize code for captured image resize and rotate using canvas of html5, which now giving low memory warning on mobile
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload