将js/css脚本放到png图片中的实践。
将js/css脚本放到png图片中的实践。
版权声明:本文为博主原创文章,未经博主允许不得转载。
需要处理的问题:
解决方案就是:一个像素存放三个字符并将alpha固定为255。
第二轮demo测试符合预期。
5、存为png图片。
代码示例
- <textarea id="base64"></textarea>
- <script>
- function encodeUTF8(str) {
- return String(str).replace(
- /[\u0080-\u07ff]/g,
- function(c) {
- var cc = c.charCodeAt(0);
- return String.fromCharCode(0xc0 | cc >> 6, 0x80 | cc & 0x3f);
- }
- ).replace(
- /[\u0800-\uffff]/g,
- function(c) {
- var cc = c.charCodeAt(0);
- return String.fromCharCode(0xe0 | cc >> 12, 0x80 | cc >> 6 & 0x3f, 0x80 | cc & 0x3f);
- }
- );
- }
- function request(url, loaded) {
- var xmlhttp = new XMLHttpRequest();
- xmlhttp.onreadystatechange = function() {
- if (xmlhttp.readyState == 4)
- if (xmlhttp.status == 200)
- loaded(xmlhttp);
- }
- xmlhttp.open("GET", url, true);
- xmlhttp.send();
- }
- void function(){
- var source = 'tangram-1.5.0.js';
- request(source, function(xmlhttp){
- var text = encodeUTF8(xmlhttp.responseText);
- var pixel = Math.ceil((text.length + 2) / 3); // 1一个像素存3个字节,
- var size = Math.ceil(Math.sqrt(pixel));
- //console.log([text.length, pixel, size, size * size * 3]);
- var canvas = document.createElement('canvas');
- canvas.width = canvas.height = size;
- var context = canvas.getContext("2d"),
- imageData = context.getImageData(0, 0, canvas.width, canvas.height),
- pixels = imageData.data;
- for(var i = 0, j = 0, l = pixels.length; i < l; i++){
- if (i % 4 == 3) { // alpha会影响png还原
- pixels[i] = 255;
- continue;
- }
- var code = text.charCodeAt(j++);
- if (isNaN(code)) break;
- pixels[i] = code;
- }
- context.putImageData(imageData, 0, 0);
- document.getElementById('base64').value = canvas.toDataURL("image/png");
- });
- }();
- </script>
代码示例
- <script>
- void function(){
- var source = 'tangram-1.5.0.png';
- var img = document.createElement('img');
- img.onload = function(){
- var canvas = document.createElement('canvas');
- canvas.width = img.width;
- canvas.height = img.height;
- var context = canvas.getContext("2d");
- context.drawImage(img, 0, 0);
- var imageData = context.getImageData(0, 0, canvas.width, canvas.height),
- pixels = imageData.data;
- var script = document.createElement('script');
- var buffer = [];
- for (var i = 0, l = pixels.length; i < l; i++) {
- if (i % 4 == 3) continue; // alpha会影响png还原
- if (!pixels[i]) break;
- buffer.push(String.fromCharCode(pixels[i]));
- }
- script.src = 'data:text/javascript;charset=utf-8,' + encodeURIComponent(buffer.join(''));
- document.body.appendChild(script);
- script.onload = function(){
- alert(T.date.format(new Date, 'yyyy年M月d日'));
- }
- img = null;
- }
- img.src = source;
- }();
- </script>
优势
将js/css脚本放到png图片中的实践。的更多相关文章
- MVC 中如果js,css文件放到视图文件夹无法访问的解决办法
在视图配置文件web.config 中添加如下节点,注意:此web.config 是视图文件夹中的,在你的views视图中可以找到<system.webServer>开头的<hand ...
- 自写脚本实现上线前本地批量压缩混淆 js , css 代码。
最近做项目遇到一个要求,就是把本地的 js 和 css 进行压缩后再上线,由于之前项目并没有使用 webpack 之类的库,项目上也因为一些机密不能在线上压缩,这无疑给代码打包压缩带来了很大麻烦,于是 ...
- JS&CSS文件请求合并及压缩处理研究(五)
接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...
- iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ
iOS之在webView中引入本地html,image,js,css文件的方法 2014-12-08 20:00:16CSDN-sky_2016-点击数:10292 项目需求 最近开发的项 ...
- ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩
JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...
- JS&CSS文件请求合并及压缩处理研究(一)
在我们日常的网站开发工作中,一个页面难免会引用到各种样式及脚本文件.了解Web开发的朋友们都知道,页面引用的每一个: <link href="style.css" rel=& ...
- ASP.NET MVC 4使用Bundle的打包压缩JS/CSS
打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS ...
- 实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js+css实现带缓冲效果右键弹出菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 《JAVA设计模式》之抽象工厂模式(Abstract Factory)
场景问题 举个生活中常见的例子——组装电脑,我们在组装电脑的时候,通常需要选择一系列的配件,比如CPU.硬盘.内存.主板.电源.机箱等.为讨论使用简单点,只考虑选择CPU和主板的问题. 事实上,在选择 ...
- Spring bean相关
Spring中指定Bean的作用于的方式 以下四种为例: 单例(默认,可以不用特殊表明) @Scope(value = ConfigurableBeanFactory.SCOPE_SINGLETON) ...
- NGUI的拖拽和放下功能的制作,简易背包系统功能(drag and drop item)
一我们添加sprite,给sprite添加背景图片和添加box collider,但是drag and drop item在attach中是找不到的只能在add component中查找添加,如下图: ...
- Java 8实战之读书笔记四:高效Java 8编程
三.高效Java 8编程 第8章 重构.测试和调试 Java 8的新特性也可以帮助提升代码的可读性: 使用Java 8,你可以减少冗长的代码,让代码更易于理解 通过方法引用和S ...
- k3 cloud中出现合计和汇总以后没有显示出来,合价要新增一行以后才出现值
解决办法:找到对应字段,把及时触发值更新事件打上勾
- GeneXus笔记本—常用函数(中)
这篇文章是接着上一篇 常用函数(上)来写的 上次写到了Format 这个函数 我们继续接着这个往下来好了(づ ̄ 3 ̄)づ 还是一样 函数列表在此 https://wiki.genexus.com/c ...
- 微信小程序(18)-- 自定义头部导航栏
最近做的项目涉及相应的页面显示相应的顶部标题,所以就需要自定义头部导航了. 首先新建一个顶部导航公用组件topnav,导航高度怎么计算? 1.wx.getSystemInfo 和 wx.getSyst ...
- java String练习题
package java07; /* 题目: 定义一个方法,把数组{1,2,3}按照指定格式拼接成一个字符串,格式参照如下:[word1#word2#word3] 思路: 1.首先准备一个int[]数 ...
- java使用对象类型作为方法的参数
- Windows 搭建MongoDB分片集群(二)
在本篇博客中我们主要讲描述分片集群的搭建过程.配置分片集群主要有两个步骤,第一启动所有需要的mongod和mongos进程.第二步就是启动一个mongos与集群通信.下面我们一步步来描述集群的搭建过程 ...