解决canvas跨域难点(图片,摄像能源跨域卡塔尔(英

作者:分分快三计划
 

animate_css.png

添加跨域条件   crossorigin="anonymous"

 

【Redirect at origin '' has been blocked from loading by Cross-Origin Resource Sharing

policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access.】

分分快三计划 1

 

var img = ``new Image;

img.onload = myLoader;

img.crossOrigin = ``'anonymous'``; ``//可选值:anonymous,*

img.src = ``'http://....'``;

 

或者是HTML中   <img src="" id="" crossorigin="anonymous">

 

视频的话同上,<video width="320" height="240" controls="controls"  crossorigin="anonymous"></video>

如果视频 video.crossOrigin = ``'anonymous'``;  报错的话,可以在标签上面加该属性。

 

个人博客 :很多好用的 npm 包 , 可以看看  https://gilea.cn/ 

github:  https://github.com/longfei59418888/vui   (很不错的vue2.0组件库,记得给一个 start,以后有一起讨论,各种好组件)

安装:

  1. Bower:

$ bower install animate.css --save

  1. npm:

$ npm install animate.css --save

分分快三计划 2

扩展:

  1. 如果你需要在动画完成之后,执行另一些操作,可以扩展jQuery,如下
    $.fn.extend({
    animateCss: function(animationName, callback) {
    var animationEnd = (function(el) {
    var animations = {
    animation: 'animationend',
    OAnimation: 'oAnimationEnd',
    MozAnimation: 'mozAnimationEnd',
    WebkitAnimation: 'webkitAnimationEnd',
    };
    for (var t in animations) {
    if (el.style[t] !== undefined) {
    return animations[t];
    }
    }
    })(document.createElement('div'));

             this.addClass('animated '   animationName).one(animationEnd, function() {
               $(this).removeClass('animated '   animationName);
               if (typeof callback === 'function') callback();
             });
             return this;
           },
         });
    

使用:
(1)仅仅执行动画,不执行其它操作
$('#yourElement').animateCss('bounce');
(2)先执行动画,完成之后,执行其它操作
$('#yourElement').animateCss('bounce', function() {
// Do somthing after animation
});

  1. 可以通过添加css样式来控制动画的时长,延迟时间和执行次数(indinite为无限多次)
    #yourElement {
    -vendor-animation-duration: 3s;
    -vendor-animation-delay: 2s;
    -vendor-animation-iteration-count: infinite;
    }

  2. 自定义编译animate.css

  • 进入animate.css目录,并安装所需的依赖

$ cd path/to/animate.css/
$ sudo npm install

  • 如有需要,可以修改animate-config.json,来编译所需的动画效果对应css,默认是所有动画效果
    "attention_seekers": {
    "bounce": true,
    "flash": false,
    "pulse": false,
    "shake": true,
    "headShake": true,
    "swing": true,
    "tada": true,
    "wobble": true,
    "jello":true
    }
  • 运行gulp编译命令,生成自定义的css文件

使用:

  1. 基本用法
    <head>
    <link rel="stylesheet" href="animate.min.css">
    </head>
  2. 使用CDN
    <head>
    <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">

    <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    </head>

  3. 使用带SRI hash的CDN,注意设置crossorigin为anonymous
    <head>
    <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css"
    integrity="sha384-OHBBOqpYHNsIqQy8hL1U 8OXf9hH6QRxi0 EODezv82DfnZoV7qoHAZDwMwEJvSw"
    crossorigin="anonymous">

    <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
    integrity="sha384-OHBBOqpYHNsIqQy8hL1U 8OXf9hH6QRxi0 EODezv82DfnZoV7qoHAZDwMwEJvSw"
    crossorigin="anonymous">
    </head>

用法:

  1. 给元素加上css类

    $('#yourElement').addClass('animated bounceOutLeft');

  2. 去掉css类就可以去掉动画效果

    $('#yourElement').removeClass('animated bounceOutLeft');

  3. 加上infinite就可以循环播放

    $('#yourElement').addClass('animated infinite bounceOutLeft');

animate.css

Github地址: https://github.com/daneden/animate.css
体验地址:https://daneden.github.io/animate.css/

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 程序 让前端飞 星辰大海