io I need to know that how to do image crop in sanity.io using hotspot feature. I searched a whole for this but I didn't find any example for it. can any one help me from this
here is my code :
<img
src={sanityUrlFor(
value.mainImage?.asset,
currentCountryData.code
)
.width(600)
.height(600)
.url()}
alt=""
className={`${styles.bigImage} cropped-img`}
/>
please do a example code because i found a documentation but I don't know how to use that crop method.
Related
I am looking for groundoverlay library in AGM. Is there is any way to show overlay transparent images on google map something as shown below in the link.
Google Maps GroundOverlay
http://www.ryecemetery.com.au/locate.html
I am using below code for image overlay
<agm-map [latitude]="latitude" [longitude]="longitude" (mapReady)="onMapReady($event)" onresize="mapBounds($event)">
<agm-overlay [latitude]= 53.52000659999999 [longitude]= 13.404954>
<img [src] = 'this.imageUrl' alt="imagetoShow">
</agm-overlay>
</agm-map>
I need to load a different image depending on screen size. On web you would use the picture element:
<picture>
<source srcset="big.jpg" media="(min-width: 800px)">
<img src="small" />
</picture>
Note that this is different to an image with srcset. With srcset the browser decides which image to load. I need to control this as it's an entirely different image, not just a different resolution. More info here: https://dev.to/jessefulton/explain-htmls-img-srcset-vs-picture-tag-like-im-five-167p
Can this be done with React Native Web? There's a few conversations on the github repo but I dont think they do exactly what I need:
https://github.com/necolas/react-native-web/pull/1456
https://github.com/necolas/react-native-web/pull/1408
I found a library but it seems to optimise a single image, not allow you to specify different ones:
https://github.com/ladas-larry/react-native-responsive-image
Maybe I could hack by code splitting, then reading the screen width, and then load the image I need?
I have an image within a controlBarContainer that is not wanting to align right for some reason. My code looks like this:
<s:controlBarLayout>
<s:HorizontalLayout/>
</s:controlBarLayout>
<s:controlBarContent>
<mx:Text color="#EC6500">
<mx:htmlText>
<![CDATA[
<b><font size="18" font-weight="bold">Institut für Angewandte Geowissenschaften</font></b>
<b><font size="12">Forschungsprojekte: Geo-Ressourcen und Geo-Risiken</font></b>
]]>
</mx:htmlText>
</mx:Text>
<mx:Spacer width="100%"/>
<s:Image height="100" smooth="true" smoothingQuality="high"
source="#Embed(source='../images/logo.png')"/>
</s:controlBarContent>
Is there any way I get the image to align right while aligning the text left?
I think if you set the containers width (ControlBarContent) to 100%, youll get the desired alignment.
Actually, it's already algn to reight, becuase the container is not wide enough, so you think it's not working.
Try modify the parent container to 100%:
I am not exactly sure what the issue was, but after messing around with the code for a bit, I noticed that there appeared to be an issue with the image. I imported the image into GIMP and resized it then saved it as a png and jpg. Both the png and jpg files seemed to embed just fine. If any has any theories as to what might have been going on, please let me know for the future.
Is there a javascript library to draw images directly in the browser and save them to png or jpeg?
I want to use an alternative to services like aviary.com, pixlr.com and sumopaint.com and dont want to rely on third-party services and apis like these ones.
Is processingjs the right solution? I want a solution that works everywhere so please no nodejs and so on.
I need tools like a brush, paintbrush, pencil, layers, filters and so on - just like the real photoshop.
You could also draw all sorts of images and animations using http://paperjs.org/
Then you can save them using straightforward JS:
var canvas = document.getElementById("my_canvas_element");
var imageToExport = canvas.toDataURL("image/jpeg");
document.write('<img src="'+img+'"/>');
Try processingjs
For image saving, just use data-urls:
http://en.wikipedia.org/wiki/Data_URI_scheme
Get image data in JavaScript?
I am using FOP version 1.0 to create PDFs. In one of the pages I'd like to display an image (2552 x 4200 pixel) and scale it down if it doesn't fully fit on the page. As far as I could see on the mailing list the recommended way of doing this would be following:
<fo:external-graphic inline-progression-dimension.maximum="100%"
content-height="scale-down-to-fit"
content-width="scale-down-to-fit"
src="..."/>
Unfortunately, that still doesn't display the whole image. The lower part of the image is cut off. Can anyone give me a hint on what I am potentially doing wrong?
I found this page here explaining how scaling works with XSL-FO.
Essentially, this is the snippet that I used to make it work:
<fo:external-graphic
src="url('...')"
width="100%"
content-height="100%"
content-width="scale-to-fit"
scaling="uniform"
xsl:use-attribute-sets="img"/>
I found that width="100%" was the missing piece in your own attempts. Hope this helps future visitors.
Defining the exact height and width of the "viewport":
.
If you don't specify the viewport then FOP won't know what to scale your image to.
It can guess, but not know precisely.