小编bfc*_*der的帖子

我正在尝试将图像加载到canvas元素中,然后将数据拉出到toDataURL().

我的网站运行Ruby on Rails 2.3

我的图像来自aws s3.我有设置cors:

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

我有一个canvas元素:

<canvas id="explain_canvas"></canvas>

好的,所以有些背景.我最初尝试使用这样的代码,其中drawing_image只是图像的url.

var outlineImage = new Image();
outlineImage.crossOrigin = '';
outlineImage.src = drawing_image;
outlineImage.onload = function() {
  var canvas = document.getElementById('explain_canvas');
  var context = canvas.getContext("2d");
  context.drawImage(outlineImage, 10, 10, 600, 150);
}

但那不是发送原始标题.所以我以为我会通过jquery尝试ajax调用

var outlineImage = new Image();
$(outlineImage).attr('crossOrigin', '');
$.ajax({
    type: 'get',
    url : drawing_image,
    contentType: 'image/png',
    crossDomain: 'true',
    success: function() {
        $(outlineImage).attr("src", drawing_image);
    },
    error: function() {
        console.log('ah crap');
    } …

所以我在我的AWS S3存储桶上设置了cors:

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
  </CORSRule>
</CORSConfiguration>

在我的HTML中

<div id="explain_canvas"></div>

在我的javascript中,我正在加载图像并将其放入画布图像中.

var outlineImage = new Image();
outlineImage.crossOrigin = '';
outlineImage.src = drawing_image;
outlineImage.onload = function() {
  var canvasDiv = document.getElementById('explain_canvas');
  var canvas = document.createElement('canvas');
  canvas.setAttribute('width', 722);
  canvas.setAttribute('height', 170);
  canvas.setAttribute('id', 'canvas_'+canvas_element);
  canvas.setAttribute('name', 'canvas_'+canvas_element);
  canvasDiv.appendChild(canvas);
  if(typeof G_vmlCanvasManager != 'undefined') {
    canvas = G_vmlCanvasManager.initElement(canvas);
  }
  var context = canvas.getContext("2d");
  context.drawImage(outlineImage, 10, 10, 600, 150);
}

我正在加载类似的上下文以与Internet Explorer兼容.

这是我的问题.当页面加载前两次时,会出现此错误:

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

但是,当我重新加载页面几次时,它最终会工作并加载图像.完成后,我能够在canvas元素上成功调用toDataURL().

有谁知道为什么会这样？我弄错了吗？这是AWS的一个问题,我只需要等待亚马逊来修复这些问题吗？

它发生在我测试的所有浏览器中.在Chrome,Firefox,Safari,IE中.在我的Mac,PC和iPhone上.所以我不认为它与浏览器有关.此外,它发生在本地和生产中.

谢谢!

我似乎无法找到谈论这样做的任何地方.

假设我有一个哈希{"23"=>[0,3]},我想在这个哈希中合并{"23"=>[2,3]}这个哈希{"23"=>[0,2,3]}

或者如何{"23"=>[3]}合并{"23"=>0}得到{"23"=>[0,3]}

谢谢!

我正在尝试编写一个单元测试来测试我的控制器.我有一个计算属性,在模型上使用计算属性.

我不确定如何设置测试以将数据加载到模型中.

我有我的模特:

App.User = DS.Model.extend({
  name: DS.attr('string'),
  roles: DS.hasMany('role'),

  isInstructor: function(){
    return this.hasRole('instructor');
  }.property('roles'),

  hasRole: function(role_name){
    var roles = this.get('roles');
    if(!Ember.isEmpty(roles)){
      return roles.any(function(role){
        return role.get('name') === role_name;
      });
    }
    return false;
  }
});

在这里,我有我的控制器:

App.MyClassDetailsController = Ember.ObjectController.extend({
  students: function () {
    return this.get('users').filter(function (user) {
      return !user.get('isInstructor');
    });
  }.property('content.users.@each')
});

在我的测试中,当我为控制器设置内容时,我这样做:

myClassDetailsController.set('model', Ember.ObjectProxy.create({
  id: 389,
  name: 'bfcoding 101',
  users: Ember.ArrayProxy.create({
    content: [
      Ember.ObjectProxy.create({id: 1, name: 'Joe', roles: Ember.ArrayProxy.create({content: [Ember.ObjectProxy.create({name: 'instructor'})]})}),
      Ember.ObjectProxy.create({id: 2, name: 'vs', roles: Ember.ArrayProxy.create({content: [Ember.ObjectProxy.create({name: 'student'})]})}),
      Ember.ObjectProxy.create({id: …