hashChange & url change & QRCode & canvas to image
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的更多相关文章
- vue使用qrcode生成二维码,可以自定义大小
1,qrcanvas-vue插件,https://gera2ld.github.io/qrcanvas-vue/#logo.只支持像素大小的二维码 2,qrcode支持移动端自定义大小二维码 &quo ...
- 使用canvas给图片添加水印
css部分 .clip { position: absolute; clip: rect(0 0 0 0); } html部分 <input type="file" id=& ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- 让自己也能使用Canvas
<canvas> 是 HTML5 新增的元素,可使用JavaScript脚本来绘制图形.例如:画图,合成照片,创建动画甚至实时视频处理与渲染. 兼容性方面,除了一些骨灰级浏览器IE6.IE ...
- HTML5新增Canvas标签及对应属性、API详解(基础一)
知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...
- HTML5 Canvas 2D绘图
为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/4851774. ...
- canvas 多种形状绘图方法
function canvasUploadImg(image,imageName,imgType,callbackfn){ var img_width = image.width; var img_h ...
- vue 使用canvas仿芝麻分信用表
如图所示: 画布组件:dashboard.vue <template> <div> <canvas ref="canvas" v-if="c ...
- canvas绘制圆图输出图片格式
function drawCircleImage(url, callback) { const canvas = document.createElement('canvas'); const img ...
随机推荐
- ABP框架连接Mysql数据库
开始想用Abp框架来搭建公司的新项目,虽然一切还没有定数,但是兵马未动,粮草先行,我先尝试一下整个过程,才能够更好的去争取机会. 此次技术选型:Abp(Asp.Net core mvc)+mysql( ...
- Gulp(自动化构建工具 )
前言 Gulp,简而言之,就是前端自动化开发工具,利用它,我们可以提高开发效率. 比如: 1. 压缩js 2. 压缩css 3. 压缩less 4. 压缩图片 等等… 我们完全可以利用Gulp ...
- Scrum Mastery:有效利用组织的5个步骤
组织以什么样的方式能最大限度的发挥Scrum的优势?组织在哪些方面阻碍了个人的发展?Scrum是一种能使业务变得敏捷的框架.而组织恰恰需要变得敏捷.只是,组织本身有时候并没有足够的能力来帮助Scrum ...
- Docker进阶之一:Docker介绍与体系结构
一. Docker是什么 Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源,基于Linux内核的cgroup,namespace,Union FS 等技术, ...
- 【转载】java static 关键字的四种用法
原文链接点这里,感谢博主分享 在java的关键字中,static和final是两个我们必须掌握的关键字.不同于其他关键字,他们都有多种用法,而且在一定环境下使用,可以提高程序的运行性能,优化程序的结构 ...
- 文件输入输出流工具: IOUtils使用总结
序言 以前写文件的复制很麻烦,需要各种输入流,然后读取line,输出到输出流...其实apache.commons.io里面提供了输入流输出流的常用工具方法,非常方便.下面就结合源码,看看IOUTil ...
- 初学Linux要掌握的命令
echo:打印,或者直接输出指定的字符串 语法:echo (选项) (参数) 选项:/a: 发出警告声 /b: 删除前一个字符 /c: 最后不加上换行符号 /f: 换行但光标仍旧停留在原来的位置 /n ...
- FreeNas搭建踩坑指南(三)
0x00 Dell R730 无法编辑阵列卡Raid FreeNas和Windows Server都做成了uefi启动,装之前删掉了数据盘配置,系统装好后重启发现无法进入阵列卡编辑 0x01 解决方案 ...
- java集合介绍(List,Set,Map)
前言 介绍java的常用集合+各个集合使用用例 欢迎转载,请注明作者和出处哦☺ 参考: 1,<Java核心编程技术(第二版)> 2, http://www.cnblogs.com/Litt ...
- Rx响应式编程
RX响应式编程就是异步数据流编程:单击事件或事件总线;(观察者模式) 有一堆的函数能够创建流,也能将任何流-,也能将任何流进行组合和过滤.一个流能够作为另一个流的输入,能够将两个流合并,可以通过过滤流 ...