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. Vue父子组件传参新写法

    以前我在写接受自定义事件是这么写的: 后来我在官网看到这样一种说法:可以用$event代替emit事件传入的参数,于是我写成了这样: 直到昨天Vetur更新,给我报了这么一个错误: 报错原因:事件不能 ...

  2. (二)surging 微服务框架使用系列之surging 的准备工作consul安装

    suging 的注册中心支持consul跟zookeeper.因为consul跟zookeeper的配置都差不多,所以只是consul的配置 consul下载地址:https://www.consul ...

  3. AspNetCore 多环境配置 以及注册 消费Consul

    本文主要记录 CoreApi 的多环境配置以及如何消费在consul中注册的Api 服务 1.创建三个CoreApi 我们在项目中创建三个站点分别为 UserServices “用户服务”,Order ...

  4. js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div

    点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...

  5. OO第二次博客作业——电梯调度

    OO第二次博客作业——电梯调度 前言 最近三周,OO课程进入多线程学习阶段,主要通过三次电梯调度作业来学习.从单部电梯的傻瓜式调度到有性能要求的调度到多部电梯的调度,难度逐渐提升,对同学们的要求逐渐变 ...

  6. 2016年第七届蓝桥杯javaB组 试题 答案 解析

    1.煤球数目 有一堆煤球,堆成三角棱锥形.具体: 第一层放1个, 第二层3个(排列成三角形), 第三层6个(排列成三角形), 第四层10个(排列成三角形), .... 如果一共有100层,共有多少个煤 ...

  7. weUI之分页查询实现

    本文旨在介绍移动端h5分页查询实现 1.前端html 前端基于weui 样式库实现   参考http://jqweui.com/ <div class="weui-search-bar ...

  8. 第六篇Scrum冲刺博客

    一.Daily Scrum Meeting照片 二.每个人的工作 成员 ItemID 已完成工作 明天计划完成的工作 遇到的困难 张鸿 o1 已完成工作,实现积分变换,碰撞检测 将其他剩余功能进行整合 ...

  9. js判断浏览器是否支持webGL

    起因是我之前开发的网页,用到了three.js制作了一个3d的旋转球体效果. 在各种浏览器上运行都没问题,在IE上也做了兼容代码. 但是今天接电话,老板说你这网页在xp上不显示啊.IE上好使.goog ...

  10. docker镜像和容器的导出导入

    本文介绍docker镜像和容器的导入导出,用于迁移.备份.升级等场景.主要用到export.import.save.load四个方法. 原文地址:代码汇个人博客 http://www.codehui. ...