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 ...
随机推荐
- springboot~rabbitmq自己通过UI手动发布队列需要注意的地方
springboot里发布队列消息 为了兼容性和可读性更好,我们一般使用json字符串做为数据载体. public void decreaseCallMonitor(CallMonitorInfo c ...
- 常见js报错
1Uncaught TypeError: Cannot read property 'length' of null Uncaught TypeError: Cannot read property ...
- EF Core 快速上手——EF Core的三种主要关系类型
系列文章 EF Core 快速上手--EF Core 入门 本节导航 三种数据库关系类型建模 Migration方式创建和习修改数据库 定义和创建应用DbContext 将复杂查询拆分为子查询 本 ...
- 【20190220】HTTP-知识点整理:TCP/IP与HTTP
TCP/IP是互联网相关的各类协议族的总称,HTTP属于它内部的一个子集. 一.TCP/TP的分层管理 1. 应用层 应用层决定了向用户提供应用服务时通信的活动.TCP/IP 协议族内预存了各类通用的 ...
- 移动开发基础-学习笔记二-字体图标、less、bootstrap入门
1.字体图标 1.字体图标都是用svg图片 1.svg图片不失真 2.svg图标由设计师提供 3.为了减少网络请求,会把svg图标转换成字体图标,放到字体文件中,通过字体库的方式使用 2.制作步骤 1 ...
- Webpack4教程 - 第二部分,使用loader处理scss,图片以及转换JS
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://wanago.io/2018/07/16/webpack-4-course-par ...
- 深入理解group by 语句的执行顺序 from→where→group by→select(含聚合函数)
由于之前没有对group by 语句的执行顺序(执行原理)做深入的了解,所以导致在实际应用过程中出现了一些问题.举个简单的粟子,比如一个表testA中的所有数据如下图: 我现在想从testA中查询us ...
- ConchAPI | 更智能的API监控,提升团队效率
“昨天调好的API,怎么又挂了,竟然没有人发现?” “喂喂喂,你的API挂了,无法调用成功?哪里出问题了?” “这段时间的API数量越来越多了,有谁能好好理清下?” 现在服务端技术越来越讲究微服务化, ...
- C#零基础入门-1-安装IDE
安装VS2017 下载安装,选择C#开发语言,过程略. 也可以使用VS2015
- [20190418]exclusive latch spin count.txt
[20190418]exclusive latch spin count.txt--//昨天测试"process allocation" latch,主要这个latch与其它拴锁s ...