Skip to content

Instantly share code, notes, and snippets.

@tranquangchau

tranquangchau/canvast update img.html

Created February 16, 2017 09:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tranquangchau/e0ad6394d27dcb9a3cca11820221951c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tranquangchau/e0ad6394d27dcb9a3cca11820221951c to your computer and use it in GitHub Desktop.
Download ZIP
zoom + zoom - rotation right rotation left flip H flip W effect1 effect2 effect3
Raw
canvast update img.html
<style>
#canvas{border: 1px solid;}
</style>
<button id="zoomplus" onclick="change(1)">zoom +</button>
<button id="zoomsub" onclick="change(2)">zoom -</button>
<button id="rotation_r" onclick="change(3)">rotation right</button>
<button id="rotation_l" onclick="change(4)">rotation left</button>
<button id="flipH" onclick="change(5)">flip H</button>
<button id="flipW" onclick="change(6)">flip W</button>
<button id="effect1" onclick="change(7)">effect1</button>
<button id="effect2" onclick="change(8)">effect2</button>
<button id="effect2" onclick="change(9)">effect3</button>
<!--input type="checkbox" id="horizontalCheckbox" /> <label for="horizontalCheckbox">Flip horizontal</label>
<input type="checkbox" id="verticalCheckbox" /> <label for="verticalCheckbox">Flip vertical</label>
<button id="flipButton">Flip ninjas!</button-->
<br>
<br>
<canvas id="canvas" width="500" height="428"></canvas>
<!--script src="jquery.min.js"></script-->
<script>
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
flipButton = document.getElementById('flipButton'),
img = new Image(),
width = 500,
height = 428;
function flipImage(image, ctx) {
ctx.save(); // Save the current state
ctx.drawImage(img, 0, 0, width, height); // draw the image
ctx.restore(); // Restore the last saved state
};
function flipNinjas() {
// var flipH = document.getElementById('horizontalCheckbox').checked,
// flipV = document.getElementById('verticalCheckbox').checked;
flipImage(img, ctx);
return false;
}
//flipButton.onclick = flipNinjas;
flipNinjas();
//img.onload = flipNinjas;
img.onload = function() {
flipNinjas();
//alert(this.width + 'x' + this.height);
}
//img.src = 'http://3.bp.blogspot.com/-h_hVjcMqx8Q/TdSbVhT18sI/AAAAAAAAACQ/y-egUR0AtRM/s1600/ninja_true-ninjas.gif';
img.src = 'pic.jpg';
//img.src = 'http://localhost/customcase/wp-content/plugins/woocommerce-products-designer/public/images/backgrounds/A0032.jpg';
//img.src = 'hinh.jpg';
//img.src = 'https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png';
var ww=width;
var hh=height;
//gan mac dinh
var _obj_list_canvas={};
var at_id='1';
var o_detail=new Object();
o_detail._id=at_id;
o_detail._img='';
o_detail._in_ctx='';
o_detail._x=2;
o_detail._y=0;
o_detail._width_parent=ww;
o_detail._width=ww;
o_detail._height_parent=hh;
o_detail._height=hh;
o_detail._flipH=1;
o_detail._flipV=1;
o_detail._number_zoom=0;
o_detail._rotation=0;
o_detail._effect=0;
_obj_list_canvas[at_id]=o_detail;
console.log(_obj_list_canvas[at_id]._x);
_obj_list_canvas[at_id]._x=0;
console.log(_obj_list_canvas[at_id]._x);
function change(value){
console.log(_obj_list_canvas);
//alert(value);
var _img = _obj_list_canvas[at_id]._img;
var _in_ctx = _obj_list_canvas[at_id]._in_ctx;
var _x = _obj_list_canvas[at_id]._x;
var _y = _obj_list_canvas[at_id]._y;
var _width = _obj_list_canvas[at_id]._width;
var _height = _obj_list_canvas[at_id]._height;
var _flipH = _obj_list_canvas[at_id]._flipH;
var _flipV = _obj_list_canvas[at_id]._flipV;
var _number_zoom = _obj_list_canvas[at_id]._number_zoom;
var _rotation = _obj_list_canvas[at_id]._rotation;
var _effect = _obj_list_canvas[at_id]._effect;
_img=img;
_in_ctx= ctx;
//_width = ww;
//_height = hh;
//_flipH= document.getElementById('horizontalCheckbox').checked;
//_flipV= document.getElementById('verticalCheckbox').checked;
//alert(_flipH);
switch (value)
{
case 1:
//alert("1");
var tile=(_width+13)/_width;
_width=_width*tile;
_height=_height*tile;
break;
case 2:
var tile=(_width-13)/_width;
if(_width*tile>width){
_width=_width*tile;
_height=_height*tile;
}
break;
case 3:
_rotation +=90;
console.log(_rotation);
_width = _obj_list_canvas[at_id]._width_parent;
_height = _obj_list_canvas[at_id]._height_parent;
_number_zoom = 0;
_flipH=1;
_flipV=1;
var result=rotation_effect(_rotation,_width,_height);
_rotation=result[0];
_x=result[1];
_y=result[2];
_width=result[3];
_height=result[4];
console.log(result);
//set zoom =1; default not zoom
break;
case 4:
_rotation -=90;
_width = _obj_list_canvas[at_id]._width_parent;
_height = _obj_list_canvas[at_id]._height_parent;
_number_zoom = 0;
_flipH=1;
_flipV=1;
var result=rotation_effect(_rotation,_width,_height);
_rotation=result[0];
_x=result[1];
_y=result[2];
_width=result[3];
_height=result[4];
console.log(result);
break;
case 5:
//alert("change _flipH");
_flipH=_flipH*-1;
var result = flip_event(_flipH,_flipV,_width,_height,_rotation,_x,_y);
_flipH=result[0];
_flipV=result[1];
_x=result[2];
_y=result[3];
break;
case 6:
//alert("8");
_flipV=_flipV*-1;
//alert(_flipV);
var result = flip_event(_flipH,_flipV,_width,_height,_rotation,_x,_y);
_flipH=result[0];
_flipV=result[1];
_x=result[2];
_y=result[3];
case 7:
_effect=0;
break;
case 8:
_effect=1;
break;
case 9:
_effect=2;
break;
default:
break;
}
draw_img_alkl_function(_img,_in_ctx, _x, _y, _width, _height, _flipH, _flipV, _number_zoom, _rotation,_effect);
//gan lai toan cuc
ww=_width;
hh=_height;
_obj_list_canvas[at_id]._rotation = _rotation;
_obj_list_canvas[at_id]._width = _width;
_obj_list_canvas[at_id]._height = _height;
_obj_list_canvas[at_id]._x = _x;
_obj_list_canvas[at_id]._y = _y;
_obj_list_canvas[at_id]._flipH = _flipH;
_obj_list_canvas[at_id]._flipV = _flipV;
_obj_list_canvas[at_id]._number_zoom=_number_zoom;
_obj_list_canvas[at_id]._effect = _effect;
return false;
}
function flip_event(_flipH,_flipV,_width,_height,_rotation,_x,_y){
//console.log();
//var _scaleH = _flipH ? -1 : 1, // Set horizontal scale to -1 if flip horizontal
//_scaleV = _flipV ? -1 : 1, // Set verical scale to -1 if flip vertical
var _posX=_x;// = _flipH ? _width * -1 : 0, // Set x position to -100% if flip horizontal
var _posY=_y;
//alert(_rotation+" of flip_event");
if(_flipH==-1){
if(_rotation==0){
_posX=_width * -1;
}
if(_rotation==90){
_posX=-_width;
}
if(_rotation==180){
_posX=0;
}
if(_rotation==270){
_posX=0;
}
}else{
if(_rotation==0){
_posX=0;
}
if(_rotation==90){
_posX=0;
}
if(_rotation==180){
_posX=-_width;
}
if(_rotation==270){
_posX=-_width;
}
}
//_posY = _flipV ? _height * -1 : 0; // Set y position to -100% if flip vertical
if(_flipV==-1){
//_posY=_height * -1;
if(_rotation==0){
_posY=height * -1;
//_posX=-200;
}
if(_rotation==90){
_posY=0;
}
if(_rotation==180){
_posY=0;
}
if(_rotation==270){
_posY=height * -1;
}
}else{
//_posY=_height * -1;
if(_rotation==0){
_posY=0;
//_posX=-200;
}
if(_rotation==90){
_posY=-height;
}
if(_rotation==180){
_posY=-height;
}
if(_rotation==270){
_posY=0;
}
}
var a=[];
a.push(_flipH);
a.push(_flipV);
a.push(_posX);
a.push(_posY);
console.log(" flip");
console.log(a);
return a;
}
function rotation_effect(degrees,width,height){
switch (degrees)
{
case -360:
degrees=0;
break;
case -270:
degrees=90;
break;
case -180:
degrees=180;
break;
case -90:
degrees=270;
break;
case 0:
break;
case 90:
break;
case 180:
break;
case 270:
break;
case 360:
degrees=0;
break;
default:
break;
}
var setx,sety;
//alert(degrees);
if(degrees==0){
sety=0;
setx=0;
}
if(degrees==90){
sety=-width;
setx=0;
}
if(degrees==180){
sety=-height;
setx=-width;
}
if(degrees==270){
sety=0;
setx=-width;
}
var a=[];
a.push(degrees);
a.push(setx);
a.push(sety);
a.push(width);
a.push(height);
console.log(a);
return a;
}
function draw_img_alkl_function(_img, _in_ctx, _x, _y, _width, _height, _flipH, _flipV, _number_zoom, _rotation,_effect){
//_flipH = _flipH ? -1 : 1,
//_flipV = _flipV ? -1 : 1;
/*
console.log(_x+"___"+_y);
var _scaleH = _flipH ? -1 : 1, // Set horizontal scale to -1 if flip horizontal
_scaleV = _flipV ? -1 : 1, // Set verical scale to -1 if flip vertical
_posX = _flipH ? _width * -1 : 0, // Set x position to -100% if flip horizontal
_posY = _flipV ? _height * -1 : 0; // Set y position to -100% if flip vertical
*/
//_posX=0;
//_posY=-500;
_posX=_x;
_posY=_y;
_in_ctx.clearRect(0, 0, canvas.width, canvas.height);
_in_ctx.save(); // Save the current state
_in_ctx.rotate(_rotation*Math.PI/180);
//_in_ctx.rotate();
//_in_ctx.rotate(_rotation); // Set scale to flip the image
//_in_ctx.scale(_scaleH, _scaleV); // Set scale to flip the image
_in_ctx.scale(_flipH, _flipV); // Set scale to flip the image
_in_ctx.drawImage(_img, _posX, _posY, _width, _height); // draw the image
////start effect
/* //change effect
var imageData = _in_ctx.getImageData(0, 0, _width, _height);
var data = imageData.data;
for(var i = 0; i < data.length; i += 4) {
var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
// red
data[i] = brightness;
// green
data[i + 1] = brightness;
// blue
data[i + 2] = brightness;
}
// overwrite original image
_in_ctx.putImageData(imageData,0,0);
*/
switch(_effect){
case 0:
break;
case 1:
var imageData = _in_ctx.getImageData(0, 0, _width, _height);
var data = imageData.data;
for(var i = 0; i < data.length; i += 4) {
var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
// red
data[i] = brightness;
// green
data[i + 1] = brightness;
// blue
data[i + 2] = brightness;
}
// overwrite original image
_in_ctx.putImageData(imageData,0,0);
break;
case 2:
var imageData = _in_ctx.getImageData(0, 0, _width, _height);
var dataArray = imageData.data;
/*
for(var i = 0; i < dataArray.length; i += 4)
{
var red = dataArray[i]; // 0 to 255
var green = dataArray[i + 1]; // 0 to 255
var blue = dataArray[i + 2]; // 0 to 255
var alpha = dataArray[i + 3]; // 0 to 255
dataArray[i] = 0.2 * red; // you can multiply the color and alpha values with a number between 0 and 1
dataArray[i + 1] = 1 * green;
dataArray[i + 2] = 1 * blue;
dataArray[i + 3] = 1 * alpha;
}
*/
/*
var r = [0, 0, 0, 1, 1, 2, 3, 3, 3, 4, 4, 4, 5, 5, 5, 6, 6, 7, 7, 7, 7, 8, 8, 8, 9, 9, 9, 9, 10, 10, 10, 10, 11, 11, 12, 12, 12, 12, 13, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 17, 18, 19, 19, 20, 21, 22, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 39, 40, 41, 42, 44, 45, 47, 48, 49, 52, 54, 55, 57, 59, 60, 62, 65, 67, 69, 70, 72, 74, 77, 79, 81, 83, 86, 88, 90, 92, 94, 97, 99, 101, 103, 107, 109, 111, 112, 116, 118, 120, 124, 126, 127, 129, 133, 135, 136, 140, 142, 143, 145, 149, 150, 152, 155, 157, 159, 162, 163, 165, 167, 170, 171, 173, 176, 177, 178, 180, 183, 184, 185, 188, 189, 190, 192, 194, 195, 196, 198, 200, 201, 202, 203, 204, 206, 207, 208, 209, 211, 212, 213, 214, 215, 216, 218, 219, 219, 220, 221, 222, 223, 224, 225, 226, 227, 227, 228, 229, 229, 230, 231, 232, 232, 233, 234, 234, 235, 236, 236, 237, 238, 238, 239, 239, 240, 241, 241, 242, 242, 243, 244, 244, 245, 245, 245, 246, 247, 247, 248, 248, 249, 249, 249, 250, 251, 251, 252, 252, 252, 253, 254, 254, 254, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255],
g = [0, 0, 1, 2, 2, 3, 5, 5, 6, 7, 8, 8, 10, 11, 11, 12, 13, 15, 15, 16, 17, 18, 18, 19, 21, 22, 22, 23, 24, 26, 26, 27, 28, 29, 31, 31, 32, 33, 34, 35, 35, 37, 38, 39, 40, 41, 43, 44, 44, 45, 46, 47, 48, 50, 51, 52, 53, 54, 56, 57, 58, 59, 60, 61, 63, 64, 65, 66, 67, 68, 69, 71, 72, 73, 74, 75, 76, 77, 79, 80, 81, 83, 84, 85, 86, 88, 89, 90, 92, 93, 94, 95, 96, 97, 100, 101, 102, 103, 105, 106, 107, 108, 109, 111, 113, 114, 115, 117, 118, 119, 120, 122, 123, 124, 126, 127, 128, 129, 131, 132, 133, 135, 136, 137, 138, 140, 141, 142, 144, 145, 146, 148, 149, 150, 151, 153, 154, 155, 157, 158, 159, 160, 162, 163, 164, 166, 167, 168, 169, 171, 172, 173, 174, 175, 176, 177, 178, 179, 181, 182, 183, 184, 186, 186, 187, 188, 189, 190, 192, 193, 194, 195, 195, 196, 197, 199, 200, 201, 202, 202, 203, 204, 205, 206, 207, 208, 208, 209, 210, 211, 212, 213, 214, 214, 215, 216, 217, 218, 219, 219, 220, 221, 222, 223, 223, 224, 225, 226, 226, 227, 228, 228, 229, 230, 231, 232, 232, 232, 233, 234, 235, 235, 236, 236, 237, 238, 238, 239, 239, 240, 240, 241, 242, 242, 242, 243, 244, 245, 245, 246, 246, 247, 247, 248, 249, 249, 249, 250, 251, 251, 252, 252, 252, 253, 254, 255],
b = [53, 53, 53, 54, 54, 54, 55, 55, 55, 56, 57, 57, 57, 58, 58, 58, 59, 59, 59, 60, 61, 61, 61, 62, 62, 63, 63, 63, 64, 65, 65, 65, 66, 66, 67, 67, 67, 68, 69, 69, 69, 70, 70, 71, 71, 72, 73, 73, 73, 74, 74, 75, 75, 76, 77, 77, 78, 78, 79, 79, 80, 81, 81, 82, 82, 83, 83, 84, 85, 85, 86, 86, 87, 87, 88, 89, 89, 90, 90, 91, 91, 93, 93, 94, 94, 95, 95, 96, 97, 98, 98, 99, 99, 100, 101, 102, 102, 103, 104, 105, 105, 106, 106, 107, 108, 109, 109, 110, 111, 111, 112, 113, 114, 114, 115, 116, 117, 117, 118, 119, 119, 121, 121, 122, 122, 123, 124, 125, 126, 126, 127, 128, 129, 129, 130, 131, 132, 132, 133, 134, 134, 135, 136, 137, 137, 138, 139, 140, 140, 141, 142, 142, 143, 144, 145, 145, 146, 146, 148, 148, 149, 149, 150, 151, 152, 152, 153, 153, 154, 155, 156, 156, 157, 157, 158, 159, 160, 160, 161, 161, 162, 162, 163, 164, 164, 165, 165, 166, 166, 167, 168, 168, 169, 169, 170, 170, 171, 172, 172, 173, 173, 174, 174, 175, 176, 176, 177, 177, 177, 178, 178, 179, 180, 180, 181, 181, 181, 182, 182, 183, 184, 184, 184, 185, 185, 186, 186, 186, 187, 188, 188, 188, 189, 189, 189, 190, 190, 191, 191, 192, 192, 193, 193, 193, 194, 194, 194, 195, 196, 196, 196, 197, 197, 197, 198, 199];
for (var i=0; i < imageData.data.length; i+=4) {
// change image colors
imageData.data[i] = r[imageData.data[i]];
imageData.data[i+1] = g[imageData.data[i+1]];
imageData.data[i+2] = b[imageData.data[i+2]];
// apply noise
if (noise > 0) {
var noise = Math.round(noise - Math.random() * noise);
for(var j=0; j<3; j++){
var iPN = noise + imageData.data[i+j];
imageData.data[i+j] = (iPN > 255) ? 255 : iPN;
}
}
}
*/
/*
for (var i = 0; i < dataArray.length; i++) {
var average = (dataArray[i*4] + dataArray[i*4+1] + dataArray[i*4+2]) /3;
// set red green and blue pixels to the average value
dataArray[i*4] = average+10;
dataArray[i*4+1] = average+10;
dataArray[i*4+2] = average+10;
}
*/
//https://code.tutsplus.com/tutorials/build-a-canvas-image-editor-with-canvas--net-18143
for(var x = 0; x < dataArray.length; x+=4) {
//convert to grayscale
var r = dataArray[x],
g = dataArray[x + 1],
b = dataArray[x + 2],
sepiaR = r * .393 + g * .769 + b * .189,
sepiaG = r * .349 + g * .686 + b * .168,
sepiaB = r * .272 + g * .534 + b * .131;
dataArray[x] = sepiaR;
dataArray[x + 1] = sepiaG;
dataArray[x + 2] = sepiaB;
}
_in_ctx.putImageData(imageData,0,0);
break;
default:
break;
}
////end effect
_in_ctx.restore(); // Restore the last saved state
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment