3.26~3.30问题总结

最新推荐文章于 2024-02-29 06:08:01 发布

lpldplws

最新推荐文章于 2024-02-29 06:08:01 发布

阅读量431

点赞数

CC 4.0 BY-SA版权

分类专栏：初期前端遇到的问题

本文链接：https://blog.youkuaiyun.com/lpldplws/article/details/79764869

初期前端遇到的问题专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何检测设备是否为iOS及其版本，并提供两种方法优化html2canvas生成的截图清晰度，同时给出了处理跨域图片的配置建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. Detecte whether device is IOS

You can use these two ways:

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);

Because Microsoft injected the word iPhone in IE11’s userAgent in order to try and fool Gmail somehow. Therefore we need to use both of userAgent and MSStream.

There is a function to detect whether the device is based on IOS:

function iOS() {
  var iDevices = [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ];
  if (!!navigator.platform) {
    while (iDevices.length) {
      if (navigator.platform === iDevices.pop()){ return true; }
    }
  }

  return false;
}

The same as navigator.userAgent, navigator.platform can be faked by the user or a browser extension.

2.Detect the IOS’s version

Note:The following code is not reliable and will break if any of these HTML5 features is deprecated in a newer iOS version. You have been warned!

function iOSversion() {
  if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
    if (!!window.indexedDB) { return 'iOS 8 and up'; }
    if (!!window.SpeechSynthesisUtterance) { return 'iOS 7'; }
    if (!!window.webkitAudioContext) { return 'iOS 6'; }
    if (!!window.matchMedia) { return 'iOS 5'; }
    if (!!window.history && 'pushState' in window.history) { return 'iOS 4'; }
    return 'iOS 3 or earlier';
  }
  return 'Not an iOS device';
}

3. html2canvas.js

(1).Note:

The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page. Therefore, it builds a representation of it based on the properties it reads from the DOM.
—— a full list of supported CSS properties
All the images that the script uses need to reside under the same origin for it to be able to read them without the assistance of a proxy. Similarly, if you have other canvas elements on the page, which have been tainted with cross-origin content, they will become dirty and no longer readable by html2canvas.
If you wish to exclude certain Elements from getting rendered, you can add a data-html2canvas-ignore attribute to those elements and html2canvas will exclude them from the rendering.

(2).Installing

npm install html2canvas
import html2canvas from 'html2canvas';

(3).使用注意事项

基于html2canvas.js可将一个元素渲染为canvas，只需要简单的调用html2canvas(element[, options]);即可。下列html2canvas方法会返回一个包含有元素的promise：

html2canvas(document.body).then(function(canvas) {
...
});

已经查到的将canvas转化为img的方法如下：

基于原生canvas的toDataURL方法将canvas输出为data: URI类型的图片地址，再将该图片地址赋值给元素的src属性即可

var dataurl = canvas.toDataURL('image/png');
var dataurl2 = canvas.toDataURL('image/jpeg', 0.8);

note:
- Setting the element attribute data-html2canvas-ignore=”true” should exclude it from rendering.（important）
- canvas.toDataURL(type, encoderOptions);
type:图片格式，默认为 image/png。
- encoderOptions:在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。
- 使用Canvas2Image.js
a tool of saving or converting canvas to images

Canvas2Image.saveAsImage(canvasObj, width, height, type)
Canvas2Image.saveAsPNG(canvasObj, width, height)
Canvas2Image.saveAsJPEG(canvasObj, width, height)
Canvas2Image.saveAsGIF(canvasObj, width, height)
Canvas2Image.saveAsBMP(canvasObj, width, height)

Canvas2Image.convertToImage(canvasObj, width, height, type)
Canvas2Image.convertToPNG(canvasObj, width, height)
Canvas2Image.convertToJPEG(canvasObj, width, height)
Canvas2Image.convertToGIF(canvasObj, width, height)
Canvas2Image.convertToBMP(canvasObj, width, height)

目前使用的是canvas.toBlob(function(blob){…}的方式
blob(binary large object)

html2canvas(document.body, {useCORS: true}).then(function (canvas) {
    canvas.toBlob(function(blob){
    }).catch(function (err) {
        console.log(err);
    });
}

找到的一个比较好的文章
DataURL与File,Blob,canvas对象之间的互相转换的Javascript

(4).生成图片的清晰度优化方案

基本原理:将canvas的属性width和height属性放大为2倍（或者设置为devicePixelRatio倍），最后将canvas的CSS样式width和height设置为原先1倍的大小。
第一种方法：

convert2canvas() {

    var shareContent = YourTargetElem; 
    var width = shareContent.offsetWidth; 
    var height = shareContent.offsetHeight; 
    var canvas = document.createElement("canvas"); 
    var scale = 2; 

    canvas.width = width * scale; 
    canvas.height = height * scale; 
    canvas.getContext("2d").scale(scale, scale); 

    var opts = {
        scale: scale, 
        canvas: canvas, 
        logging: true, 
        width: width, 
        height: height 
    };
    html2canvas(shareContent, opts).then(function (canvas) {
        var context = canvas.getContext('2d');

        var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);

        document.body.appendChild(img);
        $(img).css({
            "width": canvas.width / 2 + "px",
            "height": canvas.height / 2 + "px",
        })
    });
}

第二种方法：

如果原来使用百分比设置元素宽高，请更改为px为单位的宽高，避免样式二次计算导致的模糊
默认情况下，canvas的抗锯齿是开启的，需要关闭抗锯齿来实现图像的锐化
除了canvas可以通过扩大2倍宽高然后缩放至原有宽高来提高清晰度，对于DOM中其他的元素也可以使用css样式的scale来实现同样的缩放

convert2canvas() {

    var cntElem = $('#j-sec-end')[0];

    var shareContent = cntElem;//需要截图的包裹的（原生的）DOM 对象
    var width = shareContent.offsetWidth; //获取dom 宽度
    var height = shareContent.offsetHeight; //获取dom 高度
    var canvas = document.createElement("canvas"); //创建一个canvas节点
    var scale = 2; //定义任意放大倍数 支持小数
    canvas.width = width * scale; //定义canvas 宽度 * 缩放
    canvas.height = height * scale; //定义canvas高度 *缩放
    canvas.getContext("2d").scale(scale, scale); //获取context,设置scale 
    var opts = {
        scale: scale, // 添加的scale 参数
        canvas: canvas, //自定义 canvas
        // logging: true, //日志开关，便于查看html2canvas的内部执行流程
        width: width, //dom 原始宽度
        height: height,
        useCORS: true // 【重要】开启跨域配置
    };

    html2canvas(shareContent, opts).then(function (canvas) {

        var context = canvas.getContext('2d');
        // 【重要】关闭抗锯齿
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;

        // 【重要】默认转化的格式为png,也可设置为其他格式
        var img = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height);

        document.body.appendChild(img);

        $(img).css({
            "width": canvas.width / 2 + "px",
            "height": canvas.height / 2 + "px",
        }).addClass('f-full');

    });
}

(5).含有跨域图片的配置

由于canvas对于图片资源的同源限制，如果画布中包含跨域的图片资源则会污染画布，造成生成图片样式混乱或者html2canvas方法不执行等问题。

针对CDN中的图片的配置

var opts = {useCORS: true};
html2canvas(element, opts);

note:如果没有开启html2canvas的useCORS配置项，html2canvas会正常执行且不会报错，但是不会输出对应的CDN图片
（已测试同时包含CDN的图片和本地图片的资源的页面，但是只有本地图片能够被正常渲染出来）

4.git使用记录

–commit-msg缺失导致的missing Change-Id问题分析

情景分析：
当执行git add “file”添加到暂存器，然后执行git commit提交到本地库的时候，git需要在commit的时候在日志中写入一个唯一标识提交的SHA-1值，即是Change-Id值. git commit时会调用commit_msg脚本检查提交信息，以便在git push的时候能正常推送到远程库。此时调用默认目录下的commit_msg钩子脚本，默认目录为“.git/hooks/commit_msg”. 如果此目录下无commit_msg脚本则commit时提交日志中无ChangeId信息，则在git push的时候出错，无法正常吧改动上传到远程服务器。