用canvas把图片变成黑白相片

原来是把灰度系数分别乘以每个像素点的三个像素色(R,G,B)的值，然后得到的三个值加起来，再把得到的值赋值进去给每个R ，G，B。

微软的MSDN上提到的是，将每个R,G,B的值提取出来相加，再除以3；得到的就是灰度，然后将灰度赋值给每个R, G, B.

链接地址 https://msdn.microsoft.com/zh-cn/library/gg589527

时间： 2024-11-05 14:11:57

用canvas把图片变成黑白相片的相关文章

快速解决Canvas.toDataURL 图片跨域的问题

出现Canvas.toDataURL 图片跨域问题怎么解决呢?下面小编就为大家带来一篇Canvas.toDataURL 图片跨域问题的快速解决方法.一起跟随小编过来看看吧如题,在将页面的图片地址进行本地输出时(Html2Canvas.js),因不同源存在跨域问题,会出现toDataURL访问权限问题: [Redirect at origin 'http://sub1.xx.com' has been blocked from loading by Cross-Origin Resource S

赵雅智_运用Bitmap和Canvas实现图片显示，缩小，旋转，水印

上一篇已经介绍了Android种Bitmap和Canvas的使用,下面我们来写一个具体实例 http://blog.csdn.net/zhaoyazhi2129/article/details/32136179 运行效果: 主要代码 package com.example.guaguale; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import and

利用canvas 导出图片

使用canvas绘制图片,并将图片导出. 将不同域下图片绘制到canvas上时,不能使用toDataURL来获取imgdata,因为 canvas 使用了没有权限的跨域图片在使用canvas.toDataURL()等数据导出函数的时候会报错! img.crossOrigin = "Anonymous" ,它开启了本地的跨域允许.当然服务器存储那边也要开放相应的权限才行,如果是设置了防盗链的图片在服务端就没有相应的权限的话你本地端开启了权限也是没有用的. function downloa

使用canvas进行图片裁剪简单功能

1.html部分使用一个input[type="file"]进行图片上传: canvas进行图片的裁剪展示 <div> <input type="file" id="imgFile"> </div> <div id="demoBox" style="width: 300px;height: 300px;position: absolute;left: 300px;top:

canvas转图片

HTML5 file API加canvas实现图片前端JS压缩并上传（转载）

一.图片上传前端压缩的现实意义对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致上传失败风险. 最最重要的体验改进点:省略了图片的再加工成本.很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的.然后现在的数码设备拍摄功能都非常出众,一张原始图片超过2M几乎是标配,此时如果用户想把手机或相机中的某个得意图片

megapix-image插件使用Canvas压缩图片上传

<!DOCTYPE html > <html> <head> <title>通过Canvas及File API缩放并上传图片</title> <script src="/Scripts/Jquery/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="/Scripts/MegaPixIm

canvas 三图片插入及文字填充

/** * canvas插入图片 * 等图片加载完,在执行canvas操作 * 图片预加载:在onload 中调用方法 * drawImage(oImg,x,y,w,h) * oImg:图片x,y坐标 * w,h宽高 * * 设置背景 * createPattern(oImg,平铺方式) * repeat,repeat-x,repeat-y,no-repeat * * 渐变 * createLinearGradient(x1,y1,x2,y2) * createRadialGradient(x1

canvas压缩图片

1.canvas.toDataUrl压缩图片 canvas的toDataUrl方法可以将内容导出为base64编码格式的图片,采用base64编码将比源文件大1/3,但是该方法可以指定导出图片质量,所以前端可实现上传图片的压缩.先通过fileApi拿到本地图片地址,然后新建一个Img元素,图片绘制到canvas中后再将其导出(压缩).例如: $(':file').on('change',function(){ var file = this.files[0]; v