javascript - Delete a vertical line worth of pixels -
i trying delete vertical line 10 px in width , height of image.i using canvas. cannot post jsfiddle because cannot load image.
var canvas = document.createelement("canvas"); canvas.height = 200; canvas.width = 200; caman(canvas, "studipo.jpg", function () { var base64encoded = getresizedimage(canvas, 200, 200, 200, 160); }); function getresizedimage(canvas, width, height, croppingwidth, croppingheight) { var ctx = canvas.getcontext("2d"); var oldid = ctx.getimagedata(0, 0, width, height); var newcanvas = document.createelement("canvas"); newcanvas.width = croppingwidth; newcanvas.height = croppingheight; var newcontext2d = newcanvas.getcontext("2d"); var vnewid = newcontext2d.createimagedata(width, height); var oldarray = array.from(oldid.data); console.log(oldarray); var arraytoinsert = []; (var y = 0; y < height; ++y) { (var x = 0; x < width; ++x) { if (y > 90 && y < 130) { // how remove horizontal line worth of 20 pixels in width. } else { var index = (y * width + x) * 4; // index of current pixel arraytoinsert.push(oldarray[index]); arraytoinsert.push(oldarray[index + 1]); arraytoinsert.push(oldarray[index + 2]); arraytoinsert.push(oldarray[index + 3]); } } } (var = 0; < 200; = + 1) { (var j = 0; j < 160; j++) { var index = (i * width + j) * 4; if (j < 80 && j > 70) { // draw vertical line of pixels have (0,0,0,0) in rgb+a in middle of image. arraytoinsert[index] = 0; arraytoinsert[index + 1] = 0; arraytoinsert[index + 2] = 0; arraytoinsert[index + 3] = 0 // uncomment this. // arraytoinsert.splice (index, 4); // not work reason, should } } } vnewid.data.set(arraytoinsert); newcontext2d.putimagedata(vnewid, 0, 0, 0, 0, 200, 160); var newc = newcanvas.todataurl(); console.log(newc); // take console.log base64 encoded image , put here. // https://codebeautify.org/base64-to-image-converter } at line here.
arraytoinsert[index] = 0; arraytoinsert[index + 1] = 0; arraytoinsert[index + 2] = 0; arraytoinsert[index + 3] = 0; i can draw line vertical line this.however if try remove pixels altogether, image data gets corrupted , makes no sense , not understand why.
arraytoinsert.splice (index, 4); instead of making pixels ( 0 0 0 0 ), remove them image cropped.
here link 3 files ( html, photo used , js.)
https://drive.google.com/open?id=0b06hbozeqdkzxzndutjkelvzmmc
note: want crop in middle of image, not on edge of image.
like cake here.
i cut rectangle press 2 parts of cake each other, becomes single cake, except cropped out rectangle in middle.
you're getting messed when create imagedata new canvas. @ line:
var vnewid = newcontext2d.createimagedata(width, height); right there you're saying, "this data i'm going create exact same size original." you're creating 200x200 data object you're trying fill 190x160 pixels.
that's fine if want trim off height. imagedata interpreted left-to-right, top-to-bottom. first 160 rows, has data in each row. rest, has no data, assumes area blank. good.
when tried trim off horizontal stuff, that caused funky. each row taking progressively 10px more , 10px more next row, making image skewed , jagged.
i fixed changing call to
var vnewid = newcontext2d.createimagedata(croppingwidth, croppingheight); but there's few more problems.
- the call
getresizedimage()doesn't take account there 10 fewer pixels. there should190in there. - when put
imagedatainnewcontext2d, again need put in190or usecroppingwidth.
last not least, you've got off-by-one problem when you're cropping. you're cropping out 39 pixels , 19 pixels. observe:
if (y > 90 && y < 130) { that take pixels starting @ 91 , stopping after 129. if change either of >= or <=, fine.
here's improved code. since didn't feel getting image, improvised red circle. note can put data url in <img> instead of having use other site.
var canvas = document.createelement("canvas"); function fillsrc(canvas) { var ctx = canvas.getcontext('2d'); ctx.fillstyle = 'red'; ctx.beginpath(); ctx.ellipse(100, 100, 100, 100, math.pi * 2, 0, math.pi * 2); ctx.fill(); } canvas.height = 200; canvas.width = 200; document.body.appendchild(canvas); fillsrc(canvas); var base64encoded = getresizedimage(canvas, 200, 200, 190, 160); function getresizedimage(canvas, width, height, croppingwidth, croppingheight) { var ctx = canvas.getcontext("2d"); var oldid = ctx.getimagedata(0, 0, width, height); var newcanvas = document.createelement("canvas"); newcanvas.width = croppingwidth; newcanvas.height = croppingheight; var newcontext2d = newcanvas.getcontext("2d"); var vnewid = newcontext2d.createimagedata(croppingwidth, croppingheight); var oldarray = array.from(oldid.data); console.log(oldarray); var arraytoinsert = []; (var y = 0; y < height; ++y) { (var x = 0; x < width; ++x) { if (y >= 90 && y < 130) { // take out 40 pixels in vertical section } else if (x >= 70 && x < 80) { // take out 20 pixels in horizontal section } else { var index = (y * width + x) * 4; // index of current pixel arraytoinsert.push(oldarray[index]); arraytoinsert.push(oldarray[index + 1]); arraytoinsert.push(oldarray[index + 2]); arraytoinsert.push(oldarray[index + 3]); } } } console.log(arraytoinsert); vnewid.data.set(arraytoinsert); newcontext2d.putimagedata(vnewid, 0, 0, 0, 0, croppingwidth, croppingheight); var newc = newcanvas.todataurl(); document.getelementbyid('test').src = newc; console.log(newc); // take console.log base64 encoded image , put here. // https://codebeautify.org/base64-to-image-converter }<img id="test" />
Comments
Post a Comment