利用canvas下载图片,透明区默认变为黑色
问题:利用canvas下载图片,透明区默认变为黑色
HTML
<canvas id="canvas"></canvas>
<div style="display:none;"><img id="source" src="img/rhino.jpg"width="300" height="227">
</div>
JS
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = document.getElementById('source');ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
生成的图片
png:
jpg:
解决方案有两种:
1.给canvas填充背景色为白色
JS
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = document.getElementById('source');
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,300,300);
ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
方法二:利用获取每个像素点值进行转换
// 将canvas的透明背景设置成白色var imageData = context.getImageData(0, 0, canvas.width, canvas.height);for(var i = 0; i < imageData.data.length; i += 4) {// 当该像素是透明的,则设置成白色if(imageData.data[i + 3] == 0) {imageData.data[i] = 255;imageData.data[i + 1] = 255;imageData.data[i + 2] = 255;imageData.data[i + 3] = 255; }}context.putImageData(imageData, 0, 0);
个人不推荐第二种方法,觉得太繁琐啦
如果觉得太难理解,有篇文章写的更详细,可以点进去了解一下
http://blog.csdn.net/sinat_17775997/article/details/58708042
利用canvas下载图片,透明区默认变为黑色相关推荐
- php图片素描化,html5利用canvas实现图片转素描效果
本章给大家介绍html5如何利用canvas实现图片转素描效果.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 素描滤镜原理: 最基础的算法就是: 1.去色:(去色公式:gray = ...
- canvas下载图片方法
有个需求说要把网站上的图表可以保存到本地,查看了一下表单的元素,是canvas内的. 用了好多种方法,都失败了.最后搜到了stackoverflow上的一种方法成功导出,代码贴在下面 //canvas ...
- js 利用canvas转换图片格式并下载图片
1.利用canvas转换格式 思路很简单,就是在canvas上drawImage,然后再把canvas转换成想要的图片格式 convertImageToCanvas = (image) => { ...
- 利用canvas给图片添加水印
前言 前两天给个人网站添加了一个小功能,就是在文章编辑上传图片的时候自动给图片加上水印.给网页图片添加水印是个常见的功能,也是互联网内容作者保护自己版权的方法之一.本文简单记录一下借助canvas在前 ...
- JS利用Canvas实现图片等比例裁剪、压缩
最近在做一个政务类的移动端H5项目,用户体量达百万级别,有一个模块中有上传图片反馈的功能,由于各个手机产商拍照的像素值的都不一样,后台去浏览这个图片的时候就出现大小不一的情况,另外有些图片并不需要上传 ...
- 利用canvas给图片打马赛克
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
- 利用canvas绘制图片加水印
wxml <view class="container"><button bindtap="chooseImages">选择图片< ...
- 掌上英雄联盟APP利用Charles下载图片
import requests url="http://ossweb-img.qq.com/images/daoju/zm/list/16_235.jpg?_t=1573209043&quo ...
- 利用爬虫从一个百度贴吧页面下载图片
1. 概述 本文主要实现一个简单的爬虫,目的是从一个百度贴吧页面下载图片.下载图片的步骤如下: 获取网页html文本内容: 分析html中图片的html标签特征,用正则解析出所有的图片url链接列表: ...
最新文章
- add多个文件 git 文件夹_利用 git 提取文件夹下多个特定文件里的内容写到特定文件内...
- php乱炖,linux使用crontab实现PHP执行定时任务 | 乱炖
- vue指令:v-pre原样输出,不解析插值表达式
- 老司机教你分析日志:分析用户的地理位置信息
- SVM与感知机的异同点
- 最短路径——Dijkstra算法扩展(hdu2066,poj1062)
- 摩拜单车开锁实现原理剖析
- 交通流分析1:《基于大数据的城市公路交通流短时预测研究_张红》阅读总结
- PostgreSQL使用pgAdmin3不能编辑表里的数据
- c语言ascii字母比较大小,C语言中,大写字母M的ASCII码值比小写字母m的ASCII码值大。...
- dc持久内存与mysql_英特尔傲腾数据中心级持久内存的五大用例
- winpe装linux系统下载,winpe 安装linux
- python人工智能之:多边形矩阵热图程序实战篇(二)
- 如何在 Android 上恢复删除屏幕截图/照片的四种方式
- 面向对象与面向过程的区别与联系
- 整体压缩跟分开压缩哪个更小_2020年新能效发布,美的空调哪个系列好?美的空调推荐...
- 常数变易法_打印图形
- oa系统服务器价格,oa软件系统价格
- 幅频特性曲线protues_讲proteus实验一RC低通滤波器频率及非线性元件特性要点详解.ppt...
- Python图片读写方式之OpenCV 图像算术运算