canvas 将彩色图片变成灰度图片

最新推荐文章于 2022-08-20 15:25:38 发布

andyliu

最新推荐文章于 2022-08-20 15:25:38 发布

阅读量1.7k

点赞数

分类专栏： javascript 文章标签： function javascript 脚本 exception 浏览器 security

本文链接：https://blog.csdn.net/liushuai_andy/article/details/7927194

版权

本文介绍了一种使用JavaScript中的canvas API将彩色图片转换为灰度图片的方法。在实现过程中，遇到了跨域问题，通过在本地环境中运行解决。文章探讨了为何在不同域下运行此脚本会导致安全异常，并对域的概念提出疑问，期待深入理解。

摘要由CSDN通过智能技术生成

最近在看javascript DOM 编程艺术这本书

在书上看到这个例子，觉得摘抄下来

首先html 代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Grayscale Canvas Example</title>
		<script src="./modernizr.js"></script>
	</head>
	<body>
		<img src="./a.jpg" id="avatar" title="Jeffry Sambells" alt="My Avatar">
		<script src="grayscale.js"></script>
	</body>
</html>

注：modernizr.js 是从www.modernizr.com上下载的他是一个开源的javascript库，它提供了丰富的特性检测功能，有了它可以对html5 文档进行很好的控制。

下面是grayscale.js代码

function converToGS(img) {
	// 如果浏览器不支持canvas就返回
	if(!Modernizr.canvas) return;

	// 存储原始颜色的彩色版
	img.color = img.src;

	// 创建灰度版
	img.grayscale = createGSCan

最低0.47元/天解锁文章

andyliu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 将彩色图片变成灰度图片

最近在看javascript DOM 编程艺术这本书在书上看到这个例子，觉得摘抄下来首先html 代码 Grayscale Canvas Example 注：modernizr.js 是从www.modernizr.com上下载的他是一个开源的javascript库，它提供了丰富的特性检测功能，有了它可以对html5 文
复制链接

扫一扫

专栏目录