I am using vue2 in my project. I have an img tag which i have added crossorigin = "anonymous" to it.
I need to use canvas to print screen from a video in a specific time and show it. After I draw the image when I try to assign canvas.datatourl() to my img tag src, I get the error which you can see in title.
I searched the whole internet. All solutions were to put crossorigin="anonymous" and the problem would be solved. I tried this (as I said inside img tag or the moment before I assign canvas.datatourl() to my img tag src) but I still get this error. This is my img tag:
<img id="imgeBeforeMainVideo" class="beforeMainVideo" crossorigin="anonymous"/>
and this is my screen shot function:
var video = document.getElementById(videoId);
var w = video.videoWidth;
var h = video.videoHeight;
var canvas2 = document.createElement("canvas");
canvas2.width = w;
canvas2.height = h;
document.getElementById("imgeBeforeMainVideo").crossorigin = "anonymous";
var ctx = canvas2.getContext("2d");
ctx.drawImage(video, 0, 0, canvas2.width, canvas2.height);
let image = canvas2.toDataURL("image/jpeg")
document.getElementById("imgeBeforeMainVideo").src = image;
Related
In the code below $('#initialModel') is a button which opens up a file loader and $('#initialModelImage') is my canvas and am trying to load the image dynamically on to the canvas from the file uploader ,but am not able to see the uploaded image on the canvas.Could someone help me correct my code.Thanks.
$('#initialModel').on('change',function(e){
var modelFile=document.querySelector('#initialModel').files[0];
var reader=new FileReader();
if (modelFile)
reader.readAsDataURL(modelFile);
else
$('#initialModelImage').src = "";
reader.onloadend = function (_file)
{
var canv=document.getElementById("initialModelImage");
var ctx = canv.getContext('2d');
ctx.drawImage(reader.result,640,480);
}
});
I am able to find img tag using iwebdriver.findElement() query. Image contains captcha.
I also get the src attribute which contains the url of image but it is not working when i open it it gives me 404 error.
This is the img tag i am looking for and i need its valid image path.
{img src="https://EU1.client.hip.live.com/GetHIPData?hid=EU1.d3f00459fcb444fc8efb402f3c2dc237&fid=bbc4f6c344e7434c9b712c2d80f7268c&id=274850&type=visual&hdid=0&rnd=1798e82f1c7d4d51922f1a58c03c4d74" style="display: inline; width: 218px; height: 48px;" id="wlspispHIPBimg05f4e37f6e1bc431d8c335e2d169a0f440"}
// Assuming webdriver is set and running
IWebdriver _driver=new firefoxdriver(capabilities);
_driver.Navigate().GoToUrl("http://www.bing.com/toolbox/submit-site-url");
IWebElement img_tag = _driver.FindElement(By.CssSelector("img[style='display: inline; width: 218px; height: 48px;']"));
// Now i have the entire img tag required which contains a image.
string source_path=img_tag.GetAttribute("src");
// Now i have src url of image. but it does not show the image when i go to this source path. This is the relative path of the image i think.
I've opened the page you'r visiting. As you're trying to get captcha image. You won't be able to get image from captcha image source.
You have to get screenshot of page and crop the captcha image.
Don't use css selector with width and height. Some pages are responsive, it will put you in trouble. Use XPath instead.
public Image GetCaptchaImage()
{
Image imgCap = null;
try
{
var arrScreen = driver.GetScreenshot().AsByteArray;
using (var msScreen = new MemoryStream(arrScreen))
{
var bmpScreen = new Bitmap(msScreen);
var cap = driver.FindElement(By.XPath("//div[#id='ispHIPHIP']//img"));
var rcCrop = new Rectangle(cap.Location, cap.Size);
imgCap = bmpScreen.Clone(rcCrop, bmpScreen.PixelFormat);
}
}
catch
{
}
return imgCap;
}
I have a scene with 2 renderers sized exactly the same and put on top of each other sharing the same Perspective Camera like this:
var renderer = new THREE.WebGLRenderer();
renderer.antialias = true;
renderer.setClearColor(0xFFFFFF, 1);
renderer.setSize(Params.win.w, Params.win.h);
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.top = '0px';
renderer.domElement.style.left = '0px';
renderer.domElement.style.zIndex = '-9999';
document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene();
var cssRenderer = new THREE.CSS3DRenderer();
cssRenderer.setSize(Params.win.w, Params.win.h);
cssRenderer.domElement.style.position = 'absolute';
cssRenderer.domElement.style.top = '0px';
cssRenderer.domElement.style.left = '0px';
cssRenderer.domElement.style.zIndex = '-9998';
document.body.appendChild(cssRenderer.domElement);
var cssScene = new THREE.Scene();
//animate loop
renderer.render(scene, camera);
cssRenderer.render(cssScene, camera);
CSS Objects can be placed directly over objects in the WebGL Scene simply by referencing their positions and setting the position of the CSS Objects.
However when I add this effect:
var effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
effectFXAA.uniforms['resolution'].value.set(1 / (Params.win.w), 1 / (Params.win.h));
effectFXAA.renderToScreen = true;
var composer = new THREE.EffectComposer(renderer);
composer.setSize(Params.win.w, Params.win.h);
composer.addPass(new THREE.RenderPass(scene, camera));
composer.addPass(effectFXAA);
And call the composer to render instead like this composer.render();
My CSS Objects are no longer placed correctly.
The perspective is off since zooming will slide the CSS Objects around while the WebGL Objects retain their positions.
Any idea why the extra shader passes might be changing the perspective in the WebGL rendering resulting in the CSS Objects not staying aligned properly and sliding around?
So I figured out that despite the fact that only the composer is calling render, the original renderer also needs to have it's size reset in whatever resize method you have.
The composer is based on the original renderer, and I had commented out the resizing of this object and only resized the composer.
This is something I must have overlooked, hope this helps others!
camera.aspect = Params.win.w / Params.win.h;
camera.updateProjectionMatrix();
//MUST ALSO UPDATE RENDERER SIZE
renderer.setSize(Params.win.w, Params.win.h);
cssRenderer.setSize(Params.win.w, Params.win.h);
//composer
effectFXAA.uniforms['resolution'].value.set(1 / Params.win.w, 1 / Params.win.h);
composer.setSize(Params.win.w, Params.win.h);
Is there any way to change the sc-waveform container background from #efefef without having to load the waveform.js library? I have enough libraries loading already and the conainer bg conflicts with our site background color
I am experiencing the same issue and have had this problem before ( Overlay visible areas of transparent black silhouette PNG with pattern using CSS3 or JS ).
Here is an example with your waveform: http://jsfiddle.net/eLmmA/3/
$(function() {
var canvas = document.createElement('canvas');
canvas.width = 1800; // must match
canvas.height = 280; // must match
var canvas_context = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
var msk = new Image();
msk.onload = function(){
canvas_context.drawImage(img, 0, 0);
canvas_context.globalCompositeOperation = "destination-in";
canvas_context.drawImage(msk, 0, 0);
canvas_context.globalCompositeOperation = "source-over";
};
msk.src = 'WAVEFORM_IMAGE.EXT';
}
img.src = 'OVERLAY_IMAGE.EXT';
document.body.appendChild(canvas);
});
I think I understand what you mean. You want to change the color of the waveform background, the gray stuff around the waveform:
The problem here is that waveforms you get from SoundCloud API are represented as partly transparent PNG images, where waveform itself is transparent and the chrome around it is gray (#efefef) color.
So, unless the library you want to use for waveform customisation is using HTML5 canvas, you won't be able to use change the color of that chrome (so no, not possible with either HTML5 Widget API or Custom Player API). And you have to use waveform.js or the likes (or modify the waveform image on canvas yourself).
You could try to experiment with newest CSS filters (webkit only for now) and SVG filters, and possibly some MS IE filters for older IE versions, but I am not sure you'd manage to just change the color.
I have a Galleriffic slideshow on my page. Right now the "large" image links to the next image in the slideshow. How can I make it link to an external file instead?
First, you have to add a hidden div or span tag to your unordered list:
<li>
<a class="thumb" href="/imageurl/image.gif">imageititle</a>
<span id="project-path" style="display:none;">example_path</span>
</li>
Then, add this code to your galleriffic.js file. You are grabbing the path from the span element:
addImage: function(listItem, thumbExists, insert, position) {
var $li = ( typeof listItem === "string" ) ? $(listItem) : listItem;
var $aThumb = $li.find('a.thumb');
** var $path = $li.find('#project-path');
** var projectPath = $path.text();
var slideUrl = $aThumb.attr('href');
var title = $aThumb.attr('title');
var $caption = $li.find('.caption').remove();
var hash = $aThumb.attr('name');
Then, you add the value to the image variable:
var imageData = {
** projectPath:projectPath,
title:title,
slideUrl:slideUrl,
caption:$caption,
hash:hash,
gallery:this,
index:position
};
Now tell the gallery to change the link w/ new path on the full-size gallery images:
// Construct new hidden span for the image
var newSlide = this.$imageContainer
.append('<span class="image-wrapper current"><a class="advance-link" rel="history" href="/project/'+imageData.projectPath+'" title="'+imageData.title+'"> </a></span>')
.find('span.current').css('opacity', '0');
And comment out the gallery click action here, so that your user can just use the normal link wrapping the image:
newSlide.find('a')
.append(imageData.image)
//.click(function(e) {
//gallery.clickHandler(e, this);
//})
;
yep - at http://prestondentalgroup.com.au/downloads.html
The hyperlinks on the slide images allow viewer to open/save a PDF doc.
Works nicely (once I deciphered how to write example_path and to substitute /project/ with the URL of the PDF file (including subfolders).
So to link to readme.pdf from the site's images/downloads/ folder,
example_path becomes images/downloads/readme.pdf
and
/project/ becomes http:/prestondentalgroup.com.au/