hashChange & url change & QRCode & canvas to image


"use strict"; /**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
*
* @description iframe for eapp tesing
* @augments
* @example
*
*/ const iframeForEapp = (debug = false) => {
let iframe = document.querySelector(`[data-dom="iframe"]`);
let hash_url = window.parent.location.hash.slice(1);
if (iframe && hash_url) {
iframe.src = `http://${hash_url}`;
} else {
if (debug) {
console.log(`hash_url =`, hash_url);
}
}
}; let iframe = document.querySelector(`[data-dom="iframe"]`);
if (iframe) {
let url = window.parent.location.search.slice(1);
console.log(`url =`, url);
// iframe.src = `http://${url}`;
let hash_url = window.parent.location.hash.slice(1);
console.log(`hash_url =`, hash_url);
iframe.src = `http://${hash_url}`;
}
// hashChange ??? url change

hashChange

https://www.cnblogs.com/xgqfrms/p/9301751.html


SVG to Image

SVG to Image in js

https://www.cnblogs.com/xgqfrms/p/10516810.html

https://www.cnblogs.com/xgqfrms/p/10518203.html


canvas.toDataURL();

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL


<canvas id="canvas" width="5" height="5"></canvas>
<no-script>可以用这样的方式获取一个 data-URL</no-script>
let  canvas = document.getElementById("canvas");
let dataURL = canvas.toDataURL(); console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby... blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC" // 设置 jpeg 图片的质量节
let fullQuality = canvas.toDataURL("image/jpeg", 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z" let mediumQuality = canvas.toDataURL("image/jpeg", 0.5); let lowQuality = canvas.toDataURL("image/jpeg", 0.1);

iframe & HTTPS & CORS

https://iframe.xgqfrms.xyz/eapp/index.html#blog.sina.cn

HTTPS & Android

OK

HTTP & Android

OK

http://10.1.12.131/eapp-iframe/index.html#blog.sina.cn

HTTP & iOS

error

https://iframe.xgqfrms.xyz/eapp/index.html#blog.sina.cn

hashChange & url change & QRCode & canvas to image的更多相关文章

  1. vue使用qrcode生成二维码,可以自定义大小

    1,qrcanvas-vue插件,https://gera2ld.github.io/qrcanvas-vue/#logo.只支持像素大小的二维码 2,qrcode支持移动端自定义大小二维码 &quo ...

  2. 使用canvas给图片添加水印

    css部分 .clip { position: absolute; clip: rect(0 0 0 0); } html部分 <input type="file" id=& ...

  3. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  4. 让自己也能使用Canvas

    <canvas> 是 HTML5 新增的元素,可使用JavaScript脚本来绘制图形.例如:画图,合成照片,创建动画甚至实时视频处理与渲染. 兼容性方面,除了一些骨灰级浏览器IE6.IE ...

  5. HTML5新增Canvas标签及对应属性、API详解(基础一)

    知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...

  6. HTML5 Canvas 2D绘图

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/4851774. ...

  7. canvas 多种形状绘图方法

    function canvasUploadImg(image,imageName,imgType,callbackfn){ var img_width = image.width; var img_h ...

  8. vue 使用canvas仿芝麻分信用表

    如图所示: 画布组件:dashboard.vue <template> <div> <canvas ref="canvas" v-if="c ...

  9. canvas绘制圆图输出图片格式

    function drawCircleImage(url, callback) { const canvas = document.createElement('canvas'); const img ...

随机推荐

  1. ABP框架连接Mysql数据库

    开始想用Abp框架来搭建公司的新项目,虽然一切还没有定数,但是兵马未动,粮草先行,我先尝试一下整个过程,才能够更好的去争取机会. 此次技术选型:Abp(Asp.Net core mvc)+mysql( ...

  2. Gulp(自动化构建工具 )

    前言 Gulp,简而言之,就是前端自动化开发工具,利用它,我们可以提高开发效率. 比如: 1.  压缩js 2.  压缩css 3.  压缩less 4.  压缩图片 等等… 我们完全可以利用Gulp ...

  3. Scrum Mastery:有效利用组织的5个步骤

    组织以什么样的方式能最大限度的发挥Scrum的优势?组织在哪些方面阻碍了个人的发展?Scrum是一种能使业务变得敏捷的框架.而组织恰恰需要变得敏捷.只是,组织本身有时候并没有足够的能力来帮助Scrum ...

  4. Docker进阶之一:Docker介绍与体系结构

    一.  Docker是什么 Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源,基于Linux内核的cgroup,namespace,Union FS 等技术, ...

  5. 【转载】java static 关键字的四种用法

    原文链接点这里,感谢博主分享 在java的关键字中,static和final是两个我们必须掌握的关键字.不同于其他关键字,他们都有多种用法,而且在一定环境下使用,可以提高程序的运行性能,优化程序的结构 ...

  6. 文件输入输出流工具: IOUtils使用总结

    序言 以前写文件的复制很麻烦,需要各种输入流,然后读取line,输出到输出流...其实apache.commons.io里面提供了输入流输出流的常用工具方法,非常方便.下面就结合源码,看看IOUTil ...

  7. 初学Linux要掌握的命令

    echo:打印,或者直接输出指定的字符串 语法:echo (选项) (参数) 选项:/a: 发出警告声 /b: 删除前一个字符 /c: 最后不加上换行符号 /f: 换行但光标仍旧停留在原来的位置 /n ...

  8. FreeNas搭建踩坑指南(三)

    0x00 Dell R730 无法编辑阵列卡Raid FreeNas和Windows Server都做成了uefi启动,装之前删掉了数据盘配置,系统装好后重启发现无法进入阵列卡编辑 0x01 解决方案 ...

  9. java集合介绍(List,Set,Map)

    前言 介绍java的常用集合+各个集合使用用例 欢迎转载,请注明作者和出处哦☺ 参考: 1,<Java核心编程技术(第二版)> 2, http://www.cnblogs.com/Litt ...

  10. Rx响应式编程

    RX响应式编程就是异步数据流编程:单击事件或事件总线;(观察者模式) 有一堆的函数能够创建流,也能将任何流-,也能将任何流进行组合和过滤.一个流能够作为另一个流的输入,能够将两个流合并,可以通过过滤流 ...