zoukankan      html  css  js  c++  java
  • h5 canvas 图片上传操作

    html:

    1 <pre name="code" class=" html;" rows="15" cols="300">
    2 <input type="file" name="" accept="image/gif, image/jpeg" id="upload">
    3 <canvas id="showimg" style="border:1px solid #aaa;"></canvas>
    4 <p>移动:</p>     
    5 <input type="range" min="0" max="2" id="move" step="0.01" value="1" class="range-control" oninput="translateall()"/><br/>
    6 <button id="crop">剪裁输出</button>
    7 <img id="img" src="" style="border:1px solid #aaa;">

    js:

      1 var img = new Image();
      2 var can = document.getElementById(‘showimg‘);
      3 var ctx = can.getContext("2d");
      4 can.width = 500;
      5 can.height = 400;
      6 var fictitious_imgwidth,fictitious_imgheight,flag;
      7 var distance_x = 0;
      8 var distance_y = 0;
      9 var orign_x,orign_y//鼠标点击时的坐标
     10 var present_x,present_y//记录图片做上角的坐标
     11 var substitute_x,substitute_y//暂时记录图片左上角坐标
     12 ctx.fillStyle = "#aaa";   
     13 ctx.fillRect(0,0,500,400); 
     14 ctx.beginPath();
     15 ctx.moveTo(100,100);   
     16 ctx.lineTo(400,100);
     17 ctx.lineTo(400,300);
     18 ctx.lineTo(100,300); 
     19 ctx.lineTo(100,100); 
     20 ctx.lineWidth = 3;
     21 ctx.strokeStyle = ‘#333‘
     22 ctx.stroke();
     23 ctx.clip();
     24 ctx.closePath();
     25 ctx.clearRect(0, 0, can.width, can.height);   
     26 $(‘#upload‘).change(function(){
     27     console.log(‘this is runing‘)
     28     ctx.clearRect(0, 0, can.width, can.height); 
     29     
     30     img.onload = function(){
     31         fictitious_imgwidth = img.width;
     32         fictitious_imgheight = img.height;
     33         present_x = can.width*0.5-img.width*0.5;
     34         present_y = can.height*0.5-img.height*0.5;
     35         ctx.drawImage(img,present_x,present_y,img.width,img.height);
     36     }
     37     img.src = getFileUrl(‘upload‘);
     38     
     39 })
     40 function translateall(){
     41     var val = document.getElementById("move").value;
     42     reprint(val)
     43 }
     44 function reprint(scale){
     45     ctx.clearRect(0, 0, can.width, can.height);
     46     fictitious_imgwidth = img.width*scale;
     47     fictitious_imgheight = img.height*scale;
     48     check_present();
     49     ctx.drawImage(img,present_x,present_y,fictitious_imgwidth,fictitious_imgheight)
     50 }
     51 function getFileUrl(sourceId) { 
     52     var url; 
     53     if (navigator.userAgent.indexOf("MSIE")>=1) { // IE 
     54         url = document.getElementById(sourceId).value; 
     55     } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox 
     56         url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
     57     } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome 
     58         url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
     59     }
     60     return url; 
     61 } 
     62 $(‘#showimg‘).mousedown(function(e){
     63     console.log(‘mousedown is running‘)
     64     orign_x = e.offsetX;
     65     orign_y = e.offsetY;
     66     judgment_isinimg(e);
     67 
     68 }).mousemove(function(e){
     69     if(flag){
     70         distance_x = e.offsetX - orign_x;
     71         distance_y = e.offsetY - orign_y;
     72         ctx.clearRect(0, 0, can.width, can.height); 
     73         substitute_x = present_x + distance_x;
     74         substitute_y = present_y + distance_y;
     75         ctx.drawImage(img,substitute_x,substitute_y,fictitious_imgwidth,fictitious_imgheight);
     76         
     77     }
     78 }).mouseleave(function(){
     79     flag = false
     80     present_x = substitute_x;
     81     present_y =substitute_y;
     82 }).mouseup(function(){
     83     flag = false
     84     present_x = substitute_x;
     85     present_y =substitute_y;
     86 })
     87 
     88 function judgment_isinimg(e){
     89     var ll = present_x
     90     var lt = present_y
     91     var rl = present_x+fictitious_imgwidth
     92     var rt = present_y+fictitious_imgheight
     93     
     94 
     95     var x=event.clientX-can.getBoundingClientRect().left;
     96     var y=event.clientY-can.getBoundingClientRect().top;
     97 
     98     if(ll < x && x < rl && lt < y && y < rt){
     99         flag = true;
    100     }else{
    101         flag = false;
    102     }
    103 }
    104 
    105 function check_present(){
    106     if(typeof present_x == ‘undefined‘ || typeof present_y == ‘undefined‘){
    107         present_x = can.width*0.5-fictitious_imgwidth*0.5;
    108         present_y = can.height*0.5-fictitious_imgheight*0.5;
    109     }
    110 }
    111 
    112 $(‘#crop‘).click(function(){
    113     crop_canvas = document.createElement(‘canvas‘);
    114     crop_canvas.width = 300;  
    115     crop_canvas.height = 200;
    116     crop_ctx =crop_canvas.getContext(‘2d‘)
    117     crop_ctx.fillStyle = "#fff";
    118     crop_ctx.fillRect(0,0,300,200);
    119     check_present();
    120     crop_ctx.drawImage(img,Number(present_x)-100,Number(present_y)-100,fictitious_imgwidth,fictitious_imgheight);
    121     var fullQuality = crop_canvas.toDataURL(‘image/jpeg‘, 1.0);
    122     $(‘#img‘).attr(‘src‘,fullQuality);
    123 })




    最近写的小 demo,使用的是h5的 canvas来对图片进行放大,移动,剪裁等等
    这是最原始的代码,比较接近我的思路,后续会再对格式和结构进行优化
  • 相关阅读:
    龙井和碧螺春的功效与作用
    064 01 Android 零基础入门 01 Java基础语法 08 Java方法 02 无参带返回值方法
    063 01 Android 零基础入门 01 Java基础语法 08 Java方法 01 无参无返回值方法
    062 01 Android 零基础入门 01 Java基础语法 07 Java二维数组 01 二维数组应用
    061 01 Android 零基础入门 01 Java基础语法 06 Java一维数组 08 一维数组总结
    060 01 Android 零基础入门 01 Java基础语法 06 Java一维数组 07 冒泡排序
    059 01 Android 零基础入门 01 Java基础语法 06 Java一维数组 06 增强型for循环
    058 01 Android 零基础入门 01 Java基础语法 06 Java一维数组 05 案例:求数组元素的最大值
    057 01 Android 零基础入门 01 Java基础语法 06 Java一维数组 04 案例:求整型数组的数组元素的元素值累加和
    056 01 Android 零基础入门 01 Java基础语法 06 Java一维数组 03 一维数组的应用
  • 原文地址:https://www.cnblogs.com/huangwentian/p/7078024.html
Copyright © 2011-2022 走看看