是否可以使用JavaScript和HTML动态生成图标,使用当前页面的图标作为背景,以及前景中的随机数？
例如,假设当前的favicon看起来与此类似:
======================
====XXXXXXXXXXXXXX====
====X=================
====X=================
====X=====XXXXXXXX====
====X============X====
====X============X====
====XXXXXXXXXXXXXX====
======================
如果可能的话,我怎样才能使用JavaScript和HTML让它看起来与此类似:
======================
====XXXXXXXXXXXXXX====
====X=================
====X=================
====X=====XXXXXXXX====
====X=========--111--=
====X=========--1-1--=
====XXXXXXXXXX----1--=
==============--1111-=
地图::
=白色背景
x:原始Favicon图像
-:红色生成的图像,带有数字
1:白色文本
思路:
我想构建一个包含JavaScript的简单HTML页面来执行表单POST,其中包含嵌入在HTML中的图像数据与磁盘上的文件.
我看过这篇文章可以使用常规表单数据,但我对图像数据感到困惑.
我正在开发一个应用程序,在该应用程序中,在HTML5画布上创建/编辑图像,然后将其保存到文件存储/云中.问题在于"节约效率".保存空白画布时,即发送完全透明的空白PNG toDataURL().检测空白PNG的一种方法是在点击任何编辑/绘图功能时切换布尔值,并在清除屏幕上重置该值.
然而,这样的方法并非万无一失,因为用户可以在点击绘制/编辑功能之后保存图像但是不绘制任何东西.是否有更原生的方法来检测画布是否返回自浏览器打开后已更改的二进制字符串？或者其他一些方法来确保在客户端检测到空白的透明PNG？
我试图使用Caman.js并从Amazon S3加载图像.Caman.js是一个用于生成图像效果的JS库,它通过将一个图像副本创建到画布对象并对数据进行各种像素处理来工作.看起来canvas有一些安全细节来限制javascript访问像素数据的能力,当数据来自外部服务器时,除非该服务器传递请求中的某些安全凭证,或者跨源资源共享(CORS) ).
我之前从未遇到过CORS,我试图了解它,但我似乎无法让它工作.根据我的理解,为了避免Chrome中出现此错误:
Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SECURITY_ERR: DOM Exception 18
您需要在Amazon存储桶上设置CORS文件.这是我正在使用的CORS文件:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
这似乎没有任何影响.这些CORS文件是由亚马逊缓存还是我希望它立即生效？ - 更新:我试过8小时后仍然没有工作,所以我认为缓存不是问题.
看起来上面指定的CORS文件应该允许一切通过,不是吗？我查看了CORS和Google上的Chrome文档,但我似乎无法找到任何好的答案.有没有人以前处理过这个问题？
谢谢!凯文
更新:这是我从图像请求到亚马逊的响应标题:
Date:Thu, 18 Oct 2012 04:52:40 GMT
ETag:"9848ce610c994521295d8aa38b47bab9"
Last-Modified:Thu, 18 Oct 2012 04:19:45 GMT
Server:AmazonS3
x-amz-id-2:Govue0tJg5MLYedr/l7T2RU5RApXLZBwJ8p507hS+sLGqxYojRnVKqj4jRHRZsZ6
x-amz-request-id:F4FF5B669C3156D2
我想使用JavaScript将画布转换为图像,当我尝试canvas.toDataURL("image/png"); 它时会出错SecurityError: The operation is insecure.请帮我解决这个问题.
提前致谢.
尝试从在Internet Explorer和Safari浏览器上绘制SVG图像的画布检索数据URL时,我收到以下错误,而其他人正常工作.
此外,SVG图像包含一些<image>元素,其xlink:href属性设置为从用户的文件系统读取的图像作为数据URL.由于这些图像不在不同的域上,因此在尝试获取绘制SVG图像的画布的dataURL时,我无法想到为什么会抛出此错误.提前致谢.
SECURITY_ERR:DOM异常18:试图突破用户代理的安全策略."
我正在为一个简单的应用程序使用离线模式，并且我正在使用 Indexeddb（PounchDB 作为库），我需要将图像转换为 Base64 或 BLOB 才能保存它。
我试过这段代码只适用于一个图像（提供的图像）我不知道为什么它不适用于任何其他图像：
function convertImgToBase64URL(url, callback, outputFormat){
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function(){
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'), dataURL;
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
canvas = null;
};
img.src = url;
}
convertImgToBase64URL('http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png', function(base64Img){
alert('it works');
$('.output').find('img').attr('src', base64Img);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output"> <img> </div>它工作正常，但只有一个图像，如果我尝试任何其他图像，它不起作用
是否可以canvas.toDataURL()在Adobe AIR中使用？
当我尝试时,我收到以下错误:
错误: SECURITY_ERR:DOM异常18
<!doctype html>
<canvas id="canvas" height="200" width="200"></canvas>
<div id="new"></div>
<script>
var div = document.getElementById("new");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = 'http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png';
//img.src = 'local.png';
img.onload = function(){
//draws the image on the canvas (works)
ctx.drawImage(img,0,0,200,200);
//creates an image from the canvas (works only for local.png)
var sourceStr = canvas.toDataURL();
//creates the img-tag and adds it to the div-container
var newImage = document.createElement("img");
newImage.src = sourceStr;
div.appendChild(newImage);
}
</script>
此脚本使用html5徽标创建画布.从这个画布我想使用"toDataURL()" - 方法创建一个图像.在这里我收到一个安全错误.
Firefox说 …
我正在尝试将网页链接到的几个图像保存到离线存储中。我在 Firefox 上使用 IndexedDB，在 Chrome 上使用 FileSystem API。我的代码实际上是一个扩展，因此在 Firefox 上我在 Greasemonkey 上运行，在 Chrome 上作为内容脚本运行。我希望这是自动化的。
当我检索图像文件时遇到问题。我正在使用标题为在 IndexedDB 中存储图像和文件的文章中的示例代码，但出现错误：我尝试下载的图像位于不同的子域上，并且 XHR 失败。
XMLHttpRequest cannot load http://...uxgk.JPG. Origin http://subdomain.domain.com is not allowed by Access-Control-Allow-Origin.
在 Firefox 上我可能可以使用GM_xmlhttpRequest并且它可以工作（当我位于同源 URL 时，代码在两种浏览器上都可以工作），但我仍然需要解决 Chrome 的问题，其中其他限制（即需要交互）主页上有框架）要求我将我的脚本合并到页面中并放弃我的特权。
所以回到我试图找出一种方法来将链接到（并且可能出现在）页面中的图像保存到 IndexedDB 和/或 FileSystem API。我要么需要了解如何解决 Chrome 中的跨域问题（如果它需要权限，那么我需要修复与 jQuery 交互的方式），要么需要某种反向createObjectURL。归根结底，我需要一个 blob （File对象，据我所知）放入 IndexedDB (Firefox) 或写入 FileSystem API (Chrome)
帮忙，有人吗？
编辑：我的问题实际上可能归结为如何以我想要的方式使用 jQuery，而不失去 Chrome 上的内容脚本权限。如果我这样做，我也可以在 Chrome 上使用跨域 XHR 。尽管我更愿意得到一个不依赖于此的解决方案。具体来说，因为如果我将脚本合并到网页中，并且不要求它是内容脚本/用户脚本，我希望使用此解决方案。
编辑：我意识到问题只是关于跨站点请求。现在，在 @chris-sobolewski、这些 问题和其他一些页面（如 …
我正在使用HTML5 canvas和KineticJS方法的.toDataURL()功能.画布使用我的用户上传到站点的图像,这些图像存储在不同的计算机和子域中. .toDataURL()farm1.domain.com
问题:当.toDataURL()被调用时,我得到的错误
SECURITY_ERR: DOM Exception 18
有没有解决的办法？如果用户通过访问页面domain.com并且托管图像,我也会遇到同样的问题www.domain.com.
尝试:
我httpd.conf在virtualhost中添加了以下行,并重新启动了apache服务.
Header add Access-Control-Allow-Origin "http://www.domain.com"
Header add Access-Control-Allow-Origin "http://domain.com"
Header add Access-Control-Allow-Origin "http://farm1.domain.com"
访问www.domain.com页面上托管的图像时,我仍然遇到同样的错误domain.com!KineticJS有没有办法解决这个问题？
javascript ×11
html5-canvas ×6
html ×3
jquery ×3
base64 ×2
canvas ×2
html5 ×2
image ×2
air ×1
amazon-s3 ×1
apache ×1
cors ×1
domexception ×1
favicon ×1
firefox ×1
greasemonkey ×1
kineticjs ×1
safari ×1
upload ×1