图片常用处理

图片灰化处理

var imgdate=context.getImageData(0,0,imageWidth,imageHeight);
            var red,green,blue,gray;
           // alert(imgdate.data.length);
            for (var i=0;i<imgdate.data.length;i+=4)
            {
            red=imgdate.data[i];
            green=imgdate.data[i+1];
            blue=imgdate.data[i+2];
            gray=parseInt((red + green + blue) / 3);
            imgdate.data[i]=gray;
            imgdate.data[i+1]=gray
            imgdate.data[i+2]=gray
            }
            context.putImageData(imgdate,0,0);
            var data = canvas.toDataURL('image/png');

根据div等标签截取网页成图片

剪切viewDiv中。

 

html2canvas(document.getElementById('viewDiv')).then(function(canvas) {
//$("#viewDiv").show();
        var url=canvas.toDataURL();
         var dataUrl="url('"+url+"')"
         $('#photo').css('background-image', dataUrl);   // $('#page').hide();
    changeCut(url);
    // console.log(url)
   });


注意:如果图片不是在同一个域名下的,比如  www.baidu.com/下的。则图片无法截取。


图片旋转:

  

 var context = canvas.getContext('2d');
   context.translate(0,imageHeight);
   context.rotate(-90*Math.PI/180);
   context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);

要点:设置旋转点。以元素左上角为圆点;设置旋转角度。




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值