xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

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



©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


posted @   xgqfrms  阅读(284)  评论(4编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· .NET10 - 预览版1新功能体验(一)
历史上的今天:
2018-04-22 Nginx & Reverse Proxy All In One
点击右上角即可分享
微信分享提示